[分享]css3按照中心点旋转

CSS3中的transform属性可以实现各种形式的变形效果，其中包括按照中心点旋转。transform: rotate(45deg); 上述代码将元素按照顺时针方向旋转45度，但旋转的中心点是元素的...

CSS3中的transform属性可以实现各种形式的变形效果，其中包括按照中心点旋转。

transform: rotate(45deg); 

上述代码将元素按照顺时针方向旋转45度，但旋转的中心点是元素的左上角。如果需要按照中心点旋转，则需要使用translate属性将元素位置移动到旋转中心点。

transform: translate(-50%, -50%) rotate(45deg); 

上述代码将元素向左上方移动了50%的宽度和高度，然后再进行旋转。这样，旋转中心点就变成了元素的中心点。

如果想要元素在旋转过程中保持原来的位置不动，则可以再通过translate属性将元素移回来。

transform: translate(-50%, -50%) rotate(45deg) translate(50%, 50%); 

上述代码先将元素向左上方移动，然后旋转，最后再移回来。

以上就是CSS3按照中心点旋转的实现方法。如果想要元素绕着自己的中心点旋转，则可以将translate属性的值设为负数。

transform: translate(50%, 50%) rotate(-45deg) translate(-50%, -50%); 

这样，元素就会顺时针绕着自己的中心点旋转45度。