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 }
