本文将借助css3实现魔方动画效果，设计思路如下：

  1. 　　HTML方面采用六个div容器形成六个立方面；
  2. 　　CSS方面采用transform-style: preserve-3d;形成三维场景；transform: rotateX(-90deg) translateZ(150px);实现立方面旋转组成立方体；animation: rotate 10s linear infinite alternate;动画效果添加；

效果图：

HTML内容：

  <div class="box">

             <div class="before">

                 <ul>

                     <li>1</li>

                     <li>2</li>

                     <li>3</li>

                     <li>4</li>

                     <li>5</li>

                     <li>6</li>

                     <li>7</li>

                     <li>8</li>

                     <li>9</li>

                 </ul>

             </div>

             <div class="back"></div>

 </div>

设置before、back等六面分别作为立面的前后左右上下各面；

CSS核心：

 @keyframes rotate {

             0% {

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

             }

             20% {

                 transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg);

             }

             40% {

                 transform: rotateY(-60deg) rotateX(-40deg) rotateZ(-20deg);

             }

             60% {

                 transform: rotateY(145deg) rotateX(80deg) rotateZ(10deg);

             }

             80% {

                 transform: rotateY(90deg) rotateX(60deg) rotateZ(-20deg);

             }

             100% {

                 transform: rotateY(135deg) rotateX(-45deg) rotateZ(30deg);

             }

         }

 .top {

               background-color: transparent;

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

          }

 .box {

               width: 300px;

               height: 300px;

               margin: 150px auto;

               position: relative;

               font-size: 50px;

               /*perspective: 1000px;*/

               transform-style: preserve-3d;

               animation: rotate 10s linear infinite alternate;

          }
  1. 动画rotate设置不同时间段的立方体旋转角度；
  2. box容器指定了三维场景以及动画效果；
  3. top 则将平面旋转（rotateX）、设置距离屏幕距离（translateZ）；

如何理解3D场景下perspective与translateZ的关系？

translateZ() CSS函数沿着z轴在三维空间中重新定位元素，即，从观察者的角度而言更近或者更远。这个变换是由一个<length>元素定义的，它指定元素向内或向外移动的距离。

perspective CSS属性决定在z = 0平面和用户之间的距离以便使所述3D定位的元素一些透视效果。z> 0的每个3D元素变大;，每个z <0的三维元素则变小。效果的强度由此属性的值决定。

说明：

  1. 　　d代表perspective设置的用户目视距屏幕的距离；
  2. 　　z代表translateZ设置的元素移动距离；

源码来了：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

          ul {

              list-style: none;

              margin:0;

              padding:0;

          }

          .box {

               width: 300px;

               height: 300px;

               margin: 150px auto;

               position: relative;

               font-size: 50px;

               /*perspective: 1000px;*/

               transform-style: preserve-3d;

               animation: rotate 10s linear infinite alternate;

          }

          .box>div {

               width: 300px;

               height: 300px;

               position: absolute;

          }

          .right {

              background-color: transparent;

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

          }

          .left {

              background-color: transparent;

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

          }

          .top {

               background-color: transparent;

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

          }

         .bottom {

              background-color: transparent;

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

         }

         .before {

              background-color: transparent;

              transform: translateZ(150px);

         }

         .back {

              background-color: transparent;

              transform: translateZ(-150px);

         }

         li {

              float: left;

              width: 90px;

              height: 90px;

              border-radius: 20px;

              margin: 5px;

              text-align: center;

              line-height: 90px;

         }

         .before li {

             background-color: green;

         }

          .back li {

              background-color:chartreuse;

          }

          .top li {

               background-color: purple;

          }

          .bottom li {

               background-color: cornflowerblue;

          }

          .left li {

               background-color: darkorange;

          }

          .right li {

               background-color: #37ffc7;

          }

         .box:hover {

              animation-play-state: paused;

         }

         @keyframes rotate {

             0% {

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

             }

             20% {

                 transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg);

             }

             40% {

                 transform: rotateY(-60deg) rotateX(-40deg) rotateZ(-20deg);

             }

             60% {

                 transform: rotateY(145deg) rotateX(80deg) rotateZ(10deg);

             }

             80% {

                 transform: rotateY(90deg) rotateX(60deg) rotateZ(-20deg);

             }

             100% {

                 transform: rotateY(135deg) rotateX(-45deg) rotateZ(30deg);

             }

         }

     </style>

 </head>

 <body>

         <div class="box">

             <div class="before">

                 <ul>

                     <li>1</li>

                     <li>2</li>

                     <li>3</li>

                     <li>4</li>

                     <li>5</li>

                     <li>6</li>

                     <li>7</li>

                     <li>8</li>

                     <li>9</li>

                 </ul>

             </div>

             <div class="back">

                 <ul>

                     <li>1</li>

                     <li>2</li>

                     <li>3</li>

                     <li>4</li>

                     <li>5</li>

                     <li>6</li>

                     <li>7</li>

                     <li>8</li>

                     <li>9</li>

                 </ul>

             </div>

             <div class="top">

                 <ul>

                     <li>1</li>

                     <li>2</li>

                     <li>3</li>

                     <li>4</li>

                     <li>5</li>

                     <li>6</li>

                     <li>7</li>

                     <li>8</li>

                     <li>9</li>

                 </ul>

             </div>

             <div class="bottom">

                 <ul>

                     <li>1</li>

                     <li>2</li>

                     <li>3</li>

                     <li>4</li>

                     <li>5</li>

                     <li>6</li>

                     <li>7</li>

                     <li>8</li>

                     <li>9</li>

                 </ul>

             </div>

             <div class="left">

                 <ul>

                     <li>1</li>

                     <li>2</li>

                     <li>3</li>

                     <li>4</li>

                     <li>5</li>

                     <li>6</li>

                     <li>7</li>

                     <li>8</li>

                     <li>9</li>

                 </ul>

             </div>

             <div class="right">

                 <ul>

                     <li>1</li>

                     <li>2</li>

                     <li>3</li>

                     <li>4</li>

                     <li>5</li>

                     <li>6</li>

                     <li>7</li>

                     <li>8</li>

                     <li>9</li>

                 </ul>

             </div>

         </div>

 </body>

 </html>

CSS3实现魔方动画的更多相关文章

  1. css3之3D魔方动画（小白版）

      在这里分享一下3D魔方动画,html5+CSS3即可完成~无图无真相,先上效果图 第一步非常简单,就是先将魔方的结构画出来.大家都玩过魔方,知道魔方是一个有六个面的正方体.这里我们先写一个大的di ...

  2. CSS3 制作魔方 - 玩转魔方

    在上一篇<CSS3 制作魔方 - 形成魔方>中介绍了一个完整魔方的绘制实现,本文将介绍魔方的玩转,支持上下左右每一层独立地旋转.先来一睹玩转的风采. 1.一个问题 由于魔方格的位置与转动的 ...

  3. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  4. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  5. CSS3的自定义动画帧

    CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...

  6. CSS3中的动画功能（一）

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  7. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  8. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  9. 纯css3实现的动画加载条

    之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...

随机推荐

  1. Apache-Tomcat-Ajp漏洞(CVE-2020-1938)漏洞复现（含有poc）

    Apache-Tomcat-Ajp漏洞(CVE-2020-1938)漏洞复现 0X00漏洞简介 Apache与Tomcat都是Apache开源组织开发的用于处理HTTP服务的项目,两者都是免费的,都可 ...

  2. 2D TOOLKIT备忘录

    通过Clip名称更改动画片段 // 通过clip名称获取clip实例 tk2dSpriteAnimationClip clip = childrenAnimator.GetClipByName(&qu ...

  3. StringBuilder与String的区别

    String 在进行运算时(如赋值.拼接等)会产生一个新的实例,而 StringBuilder 则不会.所以在大量字符串拼接或频繁对某一字符串进行操作时最好使用 StringBuilder,不要使用  ...

  4. OpenCV的视频输入和相似度测量

    #include <iostream> #include <string> #include <iomanip> // 控制浮动类型的打印精度 #include & ...

  5. 搭建Hexo一键生成，同步部署

    全网最全小白搭建Hexo+Gitee/Coding/Github 全网最全小白搭建Hexo+Gitee/Coding/Github 本站内容已全部转移到https://www.myyuns.ltd,具 ...

  6. IntelliJ IDEA 2017.3尚硅谷-----主题

    http://www.riaway.com/

  7. ubuntu16.04修改复制粘贴快捷键的方法

    打开终端-选择配置文件首选项 打开,选择快捷键,自行修改

  8. stl队列

    队列(Queue)也是一种运算受限的线性表,它的运算限制与栈不同,是两头都有限制,插入只能在表的一端进行(只进不出),而删除只能在表的另一端进行(只出不进),允许删除的一端称为队尾(rear),允许插 ...

  9. python字典里面列表排序

    #coding=utf8 #获取到的数据库ip,和负载数据,需要按照负载情况排序 a={u'1.8.1.14': [379, 368, 361, 358, 1363], u'9.2.4.3': [42 ...

  10. promise封装ajax

    promise的含义(本身不是异步,是封装异步操作的容器,统一异步的标准) promise对象的特点:对象的状态不受外界影响:一旦状态改变,就不会再变,任何时候都可以得到这个结果. function ...