css 3旋转

admin管理员组

文章数量:1794759

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