css 3旋转

在css3中rotate（）实现旋转。可以使div实现2D旋转和3D旋转。
2D：
transform:rotate();
它的单位属性是度（deg）。当deg为正值时，顺时针旋转；为负值时，逆时针旋转。
transform:rotate(35deg);沿着中心点旋转；
transform:rotateX(45deg);绕X轴旋转；
transform:rotateY(45deg);绕Y轴旋转；
除了这些还可以沿其他点旋转，需要设置：transform-origin:x,y;x水平的值，y垂直的值。再设置rotate可以围绕（x,y）点旋转。

div{ 
   
	transform:rotate(18deg);
	-ms-transform:rotate(7deg); 	/* IE 9 */
	-moz-transform:rotate(7deg); 	/* Firefox */
	-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
	-o-transform:rotate(7deg); 	/* Opera */
}

3D:
在3D中不仅可以实现绕原点、X轴、Y轴旋转，还可以沿Z轴旋转：
transform：rotateZ（25deg）;
他们的复合写法为：transform: rotate3D(x,y,z,a);
0 ：不旋转；1：旋转
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

今天的文章css 3旋转分享到此就结束了，感谢您的阅读。