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需要注意。