本文将借助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. 在多租户（容器）数据库中如何创建PDB：方法6 DBCA本地克隆PDB

    基于版本:19c (12.2.0.3) AskScuti 创建方法:DBCA静默本地克隆PDB.根据 CDB1 中的 PDB1 克隆出 CDB1 中的 PDB_CLONE 对应路径:Creating ...

  2. 基于pyqt5的图片素材批量处理工具

    功能 分辨率的批量转换,文件夹递归查找 像素偏移量批量调整,文件夹单层查找 画布的大小的批量进行调整,不进行缩放,文件夹单层查找 界面 通过PyUIC生成的代码 # -*- coding: utf-8 ...

  3. layui之表单验证

    这篇文章的表单验证我只是随便记录下,望各位看官理解 1.排序 验证 html代码 <div class="layui-form-item"> <label cla ...

  4. 格式化输出_python

    一.直接使用 +a='chen'b='xiao'c='zan'print(a+b+c) 二.利用占位符 %%s:占位符:%d:整数:%x:十六进制:%f:浮点数(默认6位小数)特别注意浮点数: 指定长 ...

  5. 在网页中插入背景音乐代码(html)

    有两种 分别用<bgsound>和<embed></embed>标签,当用<embed>插入背景音乐时可以设置宽度和高度为0,隐藏播放器. 二者的参数如 ...

  6. 每天进步一点点------Xilinx DCM

    时钟---锁相环 1.       Xilinx DCM 数字时钟管理模块(Digital Clock Manager,DCM)是基于Xilinx的其他系列器件所采用的数字延迟锁相环(DLL,Dela ...

  7. 问题总结：mysql和javaweb工程连接的过程中容易产生的问题

    问题背景:自己在本机的mysql8瘫痪了,将Oracle中的数据迁移到mysql之后,配置好javaweb工程和虚拟机上的远程Mysql连接的文件之后:遇见了无法访问的问题 具体的配置: dataso ...

  8. C# 程序集（Assembly）

    程序集 程序集是代码进行编译是的一个逻辑单元,把相关的代码和类型进行组合,然后生成PE文件.程序集只是逻辑上的划分,一个程序集可以只由一个文件组成,也可由多个文件组成.不管是单文件程序集还是多文件程序 ...

  9. 树链剖分-Hello!链剖-[NOIP2015]运输计划-[填坑]

    This article is made by Jason-Cow.Welcome to reprint.But please post the writer's address. http://ww ...

  10. js中map和filter方法，以及search方法

    链接:https://blog.51cto.com/11871779/2126561 search方法: 介绍: search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符 ...