昨天偶然看见网友（简单说 用CSS做一个魔方旋转的效果）做的一个3D旋转魔方  效果就是本博客右侧公告栏所示

在这里把做法展现出来

感兴趣的可以试试  做成自己特有的魔方

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <style>

         /*最外层容器样式*/

         .wrap {

             width: 200px;

             height: 200px;

             margin: 200px;

             position: relative;

         }

         /*包裹所有容器样式*/

         .cube {

             width: 200px;

             height: 200px;

             margin: 0 auto;

             transform-style: preserve-3d;

             transform: rotateX(-30deg) rotateY(-80deg);

             animation: rotate linear 20s infinite;

         }

         @-webkit-keyframes rotate {

             from {

                 transform: rotateX(0deg) rotateY(0deg);

             }

             to {

                 transform: rotateX(360deg) rotateY(360deg);

             }

         }

         .cube div {

             position: absolute;

             width: 200px;

             height: 200px;

             opacity: 0.8;

             transition: all .4s;

         }

         /*定义所有图片样式*/

         .pic {

             width: 200px;

             height: 200px;

         }

         .cube .out_front {

             transform: rotateY(0deg) translateZ(100px);

         }

         .cube .out_back {

             transform: translateZ(-100px) rotateY(180deg);

         }

         .cube .out_left {

             transform: rotateY(-90deg) translateZ(100px);

         }

         .cube .out_right {

             transform: rotateY(90deg) translateZ(100px);

         }

         .cube .out_top {

             transform: rotateX(90deg) translateZ(100px);

         }

         .cube .out_bottom {

             transform: rotateX(-90deg) translateZ(100px);

         }

         /*定义小正方体样式*/

         .cube span {

             display: block;

             width: 100px;

             height: 100px;

             position: absolute;

             top: 50px;

             left: 50px;

         }

         .cube .in_pic {

             width: 100px;

             height: 100px;

         }

         .cube .in_front {

             transform: rotateY(0deg) translateZ(50px);

         }

         .cube .in_back {

             transform: translateZ(-50px) rotateY(180deg);

         }

         .cube .in_left {

             transform: rotateY(-90deg) translateZ(50px);

         }

         .cube .in_right {

             transform: rotateY(90deg) translateZ(50px);

         }

         .cube .in_top {

             transform: rotateX(90deg) translateZ(50px);

         }

         .cube .in_bottom {

             transform: rotateX(-90deg) translateZ(50px);

         }

         /*鼠标移入后样式*/

         .cube:hover .out_front {

             transform: rotateY(0deg) translateZ(200px);

         }

         .cube:hover .out_back {

             transform: translateZ(-200px) rotateY(180deg);

         }

         .cube:hover .out_left {

             transform: rotateY(-90deg) translateZ(200px);

         }

         .cube:hover .out_right {

             transform: rotateY(90deg) translateZ(200px);

         }

         .cube:hover .out_top {

             transform: rotateX(90deg) translateZ(200px);

         }

         .cube:hover .out_bottom {

             transform: rotateX(-90deg) translateZ(200px);

         }

     </style>

 </head>

 <body>

     <!-- 外层最大容器 -->

     <div class="wrap">

         <!--包裹所有元素的容器-->

         <div class="cube">

             <!--前面图片 -->

             <div class="out_front">

                 <img src="http://img.blog.csdn.net/20170716094246620" class="pic" />

             </div>

             <!--后面图片 -->

             <div class="out_back">

                 <img src="http://img.blog.csdn.net/20170716094334594" class="pic" />

             </div>

             <!--左面图片 -->

             <div class="out_left">

                 <img src="http://img.blog.csdn.net/20170716094400013" class="pic" />

             </div>

             <!--右面图片 -->

             <div class="out_right">

                 <img src="http://img.blog.csdn.net/20170716094422331" class="pic" />

             </div>

             <!--上面图片 -->

             <div class="out_top">

                 <img src="http://img.blog.csdn.net/20170716094444434" class="pic" />

             </div>

             <!--下面图片 -->

             <div class="out_bottom">

                 <img src="http://img.blog.csdn.net/20170716094504432" class="pic" />

             </div>

             <!--小正方体 -->

             <span class="in_front">

                 <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />

             </span>

             <span class="in_back">

                  <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />

             </span>

             <span class="in_left">

                 <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />

             </span>

             <span class="in_right">

                 <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />

             </span>

             <span class="in_top">

                 <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />

             </span>

             <span class="in_bottom">

                 <img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />

             </span>

         </div>

     </div>

 </body>

 </html>

下面是效果图

其中难点：

transform-style: preserve-3d; 
使被转换的子元素保留其 3D 转换： 
参考链接 http://www.runoob.com/cssref/css3-pr-transform-style.html

css动画 http://www.runoob.com/css3/css3-animations.html

摘自：http://m.blog.csdn.net/FE_dev/article/details/75142505

2017-11-30    08:26:45

纯CSS做3D旋转魔方的更多相关文章

  1. CSS动画之旋转魔方轮播

    很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节. 在我自己写完这篇 ...

  2. 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​

  3. 纯css做幻灯片效果

    css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...

  4. 纯CSS实现3D按钮效果

    今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常 ...

  5. 纯CSS实现3D图像轮转

    CSS演武场今天继续,今天看一个纯css实现的3D图像轮转效果,请大家猛戳研究效果先,也可下载收藏先. 首先看html文件,div.billboard为效果的容器,利用10个div.poster分割图 ...

  6. 纯css做的安卓开机动画

    随着css3的发展,越来越多的负责绚丽的效果可以由纯css来完成了.用css3实现的动画效果丝毫不必js实现的逊色,而且浏览器对css渲染的速度远比js快,大多数时候css的体积也不js小.其中css ...

  7. 纯CSS实现立方体旋转

    下面为通过CSS动画实现的立方体旋转,可以改变CSS代码中关键帧定义(@keyframes)来改变立方体的旋转方式 HTML部分: <body class="body"> ...

  8. 纯CSS绘制3D立方体

    本篇记录的是使用CSS3绘制3D立方体,并旋转起来. 我的思路: 1️⃣ 首先,用div元素画6个正方形摞在一起放在画布中间.为了区分,分别给每个div选择了不同的颜色,并且设置为半透明方便透视. 2 ...

  9. 纯css做三角形图标

    以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px ...

随机推荐

  1. noi.ac NA534 【猫】

    一眼暴力DP 再一眼决策单调性? 打个表以为是四边形不等式?? 最后发现是斜率优化??? 于是成功写了个假斜率优化真四边形不等式拿了\(80\) 设\(f[i][j]\)表示有\(i\)个工作人员出发 ...

  2. vue-router嵌套路由，二级路由。

    如果全是用一级路由时,路由管理就变得很臃肿,有点乱,路由有父子关系的话,嵌套路由会更好.嵌套也就是路由中的路由的意思,组件中可以有自己的路由导航和路由容器(router-link.router-vie ...

  3. <?xml version="1.0" encoding="UTF-8" ?>的意思

    <?xml version="1.0" encoding="UTF-8" ?> ?xml 这里是申明文件类型,这申明的是XML文件:version= ...

  4. Tomcat部署多个Springboot项目报错 InstanceNotFoundException: com.alibaba.druid:type=DruidDataSourceStat

    在一个tomcat服务器下部署了多个采用阿里druid作为数据连接池,结果启动报错.原因是不能在一个tomcat服务器下不能直接部署多个druid作为数据连接池的项目,需要配置. 解决办法: 在spr ...

  5. 【leetcode】1257. Smallest Common Region

    题目如下: You are given some lists of regions where the first region of each list includes all other reg ...

  6. CF D. Number Of Permutations 排列

    挺水的一道题~ 拿全排列随便乘一下就好了. #include <cstdio> #include <algorithm> #define N 300004 #define ll ...

  7. 【HDOJ5943】Kingdom of Obsession（数论）

    题意:给定n个人,n个座位,人的编号是[1,n],座位的编号是[s+1,s+n],编号为i的人能坐在编号为j的座位上的条件是j%i=0 问是否存在一组方案使得座位和人一一对应 n,s<=1e9 ...

  8. jmeter csv Data Set Config 文件中带引号的数据转换问题（自动添加双引号解决办法）

    1.我们从csv中获取数据,在jmeter中使用这些数据,其中csv的数据如图,有的数据包含引号. 2.问题:我们获取的json数据,被自动添加了双引号 3.解决方式: 在CSV Data Set C ...

  9. 深入理解二阶段提交协议(DDB对XA悬挂事务的处理分析)（一）

    https://sq.163yun.com/blog/article/165554812476866560

  10. 分布式-信息方式-ActiveMQ的Destination高级特性2

    使用filtered destinations,在xml配置如下: <destinationInterceptors> <virtualDestinationInterceptor& ...