CSS3动画之平移、旋转、缩放、倾斜、透视

@keyframes XXX {//动画名
	from{//动画来的起点
	//----------------transform 转换---------------------
		//translate 平移
		transform: translateY(500px);//Y轴平移
		transform: translateX(500px);//Y轴平移
		transform: translate(50px,50px);//X,Y轴平移
		transform: translate3d(x,y,z);//3d转换

		//rotate 旋转
		transform: rotate(9deg);//2d旋转
		transform: rotate3d(x,y,z,90deg)；//3d旋转,x,y,z的值在0到１之间，描述元素围绕中心轴旋转的矢量值；
		transform: rotateX(90deg);//围绕X轴的3D旋转，同有y轴和z轴
		
		//scale 缩放
		transform:scaleX(x);//X轴缩放，同有Y轴、Z轴（3d类型）缩放
		
		//skew 倾斜
		transform:skew(x-angle,y-angle);//围绕x轴、y轴的倾斜度数

		//perspective 透视
		transform: perspective(200px) rotateY(45deg);  //perspective代表镜头距离元素表面的位置
		
	}
	to{//动画去的起点}
}