CSS3实现魔方动画

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

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

效果图：

HTML内容：

 1  <div class="box">
 2             <div class="before">
 3                 <ul>
 4                     <li>1</li>
 5                     <li>2</li>
 6                     <li>3</li>
 7                     <li>4</li>
 8                     <li>5</li>
 9                     <li>6</li>
10                     <li>7</li>
11                     <li>8</li>
12                     <li>9</li>
13                 </ul>
14             </div>
15             <div class="back"></div>
16 </div>

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

CSS核心：

 1 @keyframes rotate {
 2             0% {
 3                 transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
 4             }
 5 
 6             20% {
 7                 transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg);
 8             }
 9 
10             40% {
11                 transform: rotateY(-60deg) rotateX(-40deg) rotateZ(-20deg);
12             }
13 
14             60% {
15                 transform: rotateY(145deg) rotateX(80deg) rotateZ(10deg);
16             }
17 
18             80% {
19                 transform: rotateY(90deg) rotateX(60deg) rotateZ(-20deg);
20             }
21 
22             100% {
23                 transform: rotateY(135deg) rotateX(-45deg) rotateZ(30deg);
24             }
25         }
26 
27 .top {
28               background-color: transparent;
29               transform: rotateX(90deg) translateZ(150px);
30          }
31 
32 .box {
33               width: 300px;
34               height: 300px;
35               margin: 150px auto;
36               position: relative;
37               font-size: 50px;
38               /*perspective: 1000px;*/
39               transform-style: preserve-3d;
40 
41               animation: rotate 10s linear infinite alternate;
42          }

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

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

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

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

说明：

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

translateZ perspective说明图

源码来了：

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7 
  8          ul {
  9              list-style: none;
 10              margin:0;
 11              padding:0;
 12          }
 13          .box {
 14               width: 300px;
 15               height: 300px;
 16               margin: 150px auto;
 17               position: relative;
 18               font-size: 50px;
 19               /*perspective: 1000px;*/
 20               transform-style: preserve-3d;
 21 
 22               animation: rotate 10s linear infinite alternate;
 23          }
 24         
 25          .box>div {
 26               width: 300px;
 27               height: 300px;
 28               position: absolute;
 29          }
 30          .right {
 31              background-color: transparent;
 32              transform: rotateY(90deg) translateZ(150px);
 33          }
 34          .left {
 35              background-color: transparent;
 36              transform: rotateY(-90deg) translateZ(150px);
 37          }
 38 
 39          .top {
 40               background-color: transparent;
 41               transform: rotateX(90deg) translateZ(150px);
 42          }
 43 
 44         .bottom {
 45              background-color: transparent;
 46              transform: rotateX(-90deg) translateZ(150px);
 47         }
 48 
 49         .before {
 50              background-color: transparent;
 51              transform: translateZ(150px);
 52         }
 53 
 54         .back {
 55              background-color: transparent;
 56              transform: translateZ(-150px);
 57         }
 58 
 59         li {
 60              float: left;
 61              width: 90px;
 62              height: 90px;
 63              border-radius: 20px;
 64              margin: 5px;
 65              text-align: center;
 66              line-height: 90px;
 67         }
 68 
 69         .before li {
 70             background-color: green;
 71         }
 72          .back li {
 73              background-color:chartreuse;
 74          }
 75 
 76          .top li {
 77               background-color: purple;
 78          }
 79 
 80          .bottom li {
 81               background-color: cornflowerblue;
 82          }
 83 
 84          .left li {
 85               background-color: darkorange;
 86          }
 87 
 88          .right li {
 89               background-color: #37ffc7;
 90          }
 91 
 92         .box:hover {
 93              animation-play-state: paused;
 94         }
 95         
 96         @keyframes rotate {
 97             0% {
 98                 transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
 99             }
100 
101             20% {
102                 transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg);
103             }
104 
105             40% {
106                 transform: rotateY(-60deg) rotateX(-40deg) rotateZ(-20deg);
107             }
108 
109             60% {
110                 transform: rotateY(145deg) rotateX(80deg) rotateZ(10deg);
111             }
112 
113             80% {
114                 transform: rotateY(90deg) rotateX(60deg) rotateZ(-20deg);
115             }
116 
117             100% {
118                 transform: rotateY(135deg) rotateX(-45deg) rotateZ(30deg);
119             }
120         }
121     </style>
122 </head>
123 <body>
124         <div class="box">
125             <div class="before">
126                 <ul>
127                     <li>1</li>
128                     <li>2</li>
129                     <li>3</li>
130                     <li>4</li>
131                     <li>5</li>
132                     <li>6</li>
133                     <li>7</li>
134                     <li>8</li>
135                     <li>9</li>
136                 </ul>
137             </div>
138             <div class="back">
139                 <ul>
140                     <li>1</li>
141                     <li>2</li>
142                     <li>3</li>
143                     <li>4</li>
144                     <li>5</li>
145                     <li>6</li>
146                     <li>7</li>
147                     <li>8</li>
148                     <li>9</li>
149                 </ul>
150             </div>
151             <div class="top">
152                 <ul>
153                     <li>1</li>
154                     <li>2</li>
155                     <li>3</li>
156                     <li>4</li>
157                     <li>5</li>
158                     <li>6</li>
159                     <li>7</li>
160                     <li>8</li>
161                     <li>9</li>
162                 </ul>
163             </div>
164             <div class="bottom">
165                 <ul>
166                     <li>1</li>
167                     <li>2</li>
168                     <li>3</li>
169                     <li>4</li>
170                     <li>5</li>
171                     <li>6</li>
172                     <li>7</li>
173                     <li>8</li>
174                     <li>9</li>
175                 </ul>
176             </div>
177             <div class="left">
178                 <ul>
179                     <li>1</li>
180                     <li>2</li>
181                     <li>3</li>
182                     <li>4</li>
183                     <li>5</li>
184                     <li>6</li>
185                     <li>7</li>
186                     <li>8</li>
187                     <li>9</li>
188                 </ul>
189             </div>
190             <div class="right">
191                 <ul>
192                     <li>1</li>
193                     <li>2</li>
194                     <li>3</li>
195                     <li>4</li>
196                     <li>5</li>
197                     <li>6</li>
198                     <li>7</li>
199                     <li>8</li>
200                     <li>9</li>
201                 </ul>
202             </div>
203         </div>
204 </body>
205 </html>

相关阅读:
为没有源码的DLL文件添加强名称
 部署.Net Core APi+Vue 到 linux centos 服务器（一）
安装nginx
Linux常用命令大全
 Linq 根据list属性去重复
 jQuery Validate验证框架详解
 mysql+C#
微信支付配置参数
 自定义截取数，截取字符串，返回字符串数组。
Git GUI基本操作
原文地址：https://www.cnblogs.com/giserjobs/p/12005474.html