CSS3动画之旋转魔方盒

步骤：

1.大盒子里盛放六个子盒子代表立方体的6个面；

2.子盒子开启3d效果  transform-style:preserve-3d;

3.上下面沿X轴旋转90度，一个上移盒子一半高，一个下移盒子一半高 translateZ:数值;

4.左右面沿Y轴旋转90度，一个左移盒子一半宽，一个右移盒子一半宽；

5.前后面，一个前，一个后

-----------------------------------------------

HTML结构：ul>li*6

CSS:

 1  ul{
 2             margin:300px auto;
 3             width: 200px;
 4             height: 200px;
 5             position: relative;
 6             transform-style: preserve-3d;/*给子盒子开启3d*/
 7             -webkit-transition: all 1s linear 0s;
 8             -moz-transition: all 1s linear 0s;
 9             -ms-transition: all 1s linear 0s;
10             -o-transition: all 1s linear 0s;
11             transition: all 1s linear 0s;
12         }
13         ul:hover{
14             -webkit-transform: rotateX(360deg) rotateY(360deg);
15             -moz-transform: rotateX(360deg) rotateY(360deg);
16             -ms-transform: rotateX(360deg) rotateY(360deg);
17             -o-transform: rotateX(360deg) rotateY(360deg);
18             transform: rotateX(360deg) rotateY(360deg);
19         }
20         ul li{
21             width: 200px;
22             height: 200px;
23             position: absolute;
24             background: pink;
25             top: 0px; /*六个面叠合*/
26             left: 0px;
27
28         }
29         li:nth-child(1){ /*上面*/
30             background: orange;
31             -webkit-transform: rotateX(90deg) translateZ(100px);
32             -moz-transform: rotateX(90deg)  translateZ(100px);
33             -ms-transform: rotateX(90deg)  translateZ(100px);
34             -o-transform: rotateX(90deg)  translateZ(100px);
35             transform: rotateX(90deg) translateZ(100px);
36         }
37         li:nth-child(2){ /*下面*/
38             background: lightgreen;
39             -webkit-transform: rotateX(90deg) translateZ(-100px);
40             -moz-transform: rotateX(90deg) translateZ(-100px);
41             -ms-transform: rotateX(90deg) translateZ(-100px);
42             -o-transform: rotateX(90deg) translateZ(-100px);
43             transform: rotateX(90deg) translateZ(-100px);
44         }
45         li:nth-child(3){ /*左面*/
46             background: darksalmon;
47             -webkit-transform: rotateY(90deg) translateZ(100px);
48             -moz-transform: rotateY(90deg) translateZ(100px);
49             -ms-transform: rotateY(90deg) translateZ(100px);
50             -o-transform: rotateY(90deg) translateZ(100px);
51             transform: rotateY(90deg) translateZ(100px);
52         }
53         li:nth-child(4){ /*右面*/
54             background: lightskyblue;
55             -webkit-transform: rotateY(90deg) translateZ(-100px);
56             -moz-transform: rotateY(90deg) translateZ(-100px);
57             -ms-transform: rotateY(90deg) translateZ(-100px);
58             -o-transform: rotateY(90deg) translateZ(-100px);
59             transform: rotateY(90deg) translateZ(-100px);
60         }
61         li:nth-child(5){ /*前面*/
62             -webkit-transform: translateZ(100px);
63             -moz-transform: translateZ(100px);
64             -ms-transform: translateZ(100px);
65             -o-transform: translateZ(100px);
66             transform: translateZ(100px);
67         }
68         li:last-child{ /*后面*/
69             -webkit-transform: translateZ(-100px);
70             -moz-transform: translateZ(-100px);
71             -ms-transform: translateZ(-100px);
72             -o-transform: translateZ(-100px);
73             transform: translateZ(-100px);
74         }