CSS3——旋转方块

#cube{
height: 200px;
width: 200px;
margin: auto;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
}
#f1{
height: 200px;
width: 200px;
background: #00ffcc;
position: absolute;
-webkit-backface-visibility: visible;
-webkit-transform: translateZ(100px);/*注意顺序，假如先进行了rotateX之类的，translate的方向会跟着变换*/
}
#f2{
height: 200px;
width: 200px;
background: #00aacc;
position: absolute;
-webkit-backface-visibility: visible;
-webkit-transform: translateZ(-100px);

}

#f3{
height: 200px;
width: 200px;
background: #00bfcc;
position: absolute;
-webkit-backface-visibility: visible;

-webkit-transform: rotateX(90deg) translateZ(100px);/*随着转动的变化，轴也在变化，但是x,y,z三个轴的垂直关系没有变，通过三者关系找移动*/

}
#f4{
height: 200px;
width: 200px;
background: #bbffcc;
position: absolute;
-webkit-backface-visibility: visible;
-webkit-transform: rotateX(90deg) translateZ(-100px);

}

#f5{
height: 200px;
width: 200px;
background: #00ffaa;
position: absolute;
-webkit-backface-visibility: visible;
-webkit-transform:rotateY(90deg) translateZ(100px);

}
#f6{
height: 200px;
width: 200px;
background: #00bbcc;
position: absolute;
-webkit-backface-visibility: visible;
-webkit-transform: rotateY(90deg) translateZ(-100px);

}

#cube{
-webkit-animation: rotatex 4s linear  infinite;

}
#cube:hover{
-webkit-animation: rotatey 4s linear  infinite;
}

@-webkit-keyframes rotatex {
0%{-webkit-transform: rotateX(0);}
50%{-webkit-transform: rotateX(180deg);}
100%{-webkit-transform: rotateX(360deg);}
}

@-webkit-keyframes rotatey {
0%{-webkit-transform: rotateY(0);}
50%{-webkit-transform: rotateY(180deg);}
100%{-webkit-transform: rotateY(360deg);}
}

跟着官方的Demo做了个六个面，主要是记录下自己开始对translateXYZ这三个函数的使用理解上有点问题，随着block转动后，对于这个block而言它的三个轴的方向也随之变化，使用哪个translate需要注意。