CSS3动画之旋转魔方盒

步骤：

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

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

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

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

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

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

HTML结构：ul>li*6

CSS:

  ul{
             margin:300px auto;
             width: 200px;
             height: 200px;
             position: relative;
             transform-style: preserve-3d;/*给子盒子开启3d*/
             -webkit-transition: all 1s linear 0s;
             -moz-transition: all 1s linear 0s;
             -ms-transition: all 1s linear 0s;
             -o-transition: all 1s linear 0s;
             transition: all 1s linear 0s;
         }
         ul:hover{
             -webkit-transform: rotateX(360deg) rotateY(360deg);
             -moz-transform: rotateX(360deg) rotateY(360deg);
             -ms-transform: rotateX(360deg) rotateY(360deg);
             -o-transform: rotateX(360deg) rotateY(360deg);
             transform: rotateX(360deg) rotateY(360deg);
         }
         ul li{
             width: 200px;
             height: 200px;
             position: absolute;
             background: pink;
             top: 0px; /*六个面叠合*/
             left: 0px;

         }
         li:nth-child(1){ /*上面*/
             background: orange;
             -webkit-transform: rotateX(90deg) translateZ(100px);
             -moz-transform: rotateX(90deg)  translateZ(100px);
             -ms-transform: rotateX(90deg)  translateZ(100px);
             -o-transform: rotateX(90deg)  translateZ(100px);
             transform: rotateX(90deg) translateZ(100px);
         }
         li:nth-child(2){ /*下面*/
             background: lightgreen;
             -webkit-transform: rotateX(90deg) translateZ(-100px);
             -moz-transform: rotateX(90deg) translateZ(-100px);
             -ms-transform: rotateX(90deg) translateZ(-100px);
             -o-transform: rotateX(90deg) translateZ(-100px);
             transform: rotateX(90deg) translateZ(-100px);
         }
         li:nth-child(3){ /*左面*/
             background: darksalmon;
             -webkit-transform: rotateY(90deg) translateZ(100px);
             -moz-transform: rotateY(90deg) translateZ(100px);
             -ms-transform: rotateY(90deg) translateZ(100px);
             -o-transform: rotateY(90deg) translateZ(100px);
             transform: rotateY(90deg) translateZ(100px);
         }
         li:nth-child(4){ /*右面*/
             background: lightskyblue;
             -webkit-transform: rotateY(90deg) translateZ(-100px);
             -moz-transform: rotateY(90deg) translateZ(-100px);
             -ms-transform: rotateY(90deg) translateZ(-100px);
             -o-transform: rotateY(90deg) translateZ(-100px);
             transform: rotateY(90deg) translateZ(-100px);
         }
         li:nth-child(5){ /*前面*/
             -webkit-transform: translateZ(100px);
             -moz-transform: translateZ(100px);
             -ms-transform: translateZ(100px);
             -o-transform: translateZ(100px);
             transform: translateZ(100px);
         }
         li:last-child{ /*后面*/
             -webkit-transform: translateZ(-100px);
             -moz-transform: translateZ(-100px);
             -ms-transform: translateZ(-100px);
             -o-transform: translateZ(-100px);
             transform: translateZ(-100px);
         }