在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到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。