[分享]css中怎么控制图片旋转的点

CSS中如何控制图片旋转的中心点？在CSS中控制图片旋转的中心点并不是一件困难的事情，只需要用到transformorigin属性便可以实现。transformorigin属性用来定义CSS转换的中心...

CSS中如何控制图片旋转的中心点？
在CSS中控制图片旋转的中心点并不是一件困难的事情，只需要用到transform-origin属性便可以实现。
transform-origin属性用来定义CSS转换的中心点。可以理解为变换的原点，不同的值会影响变换的效果，包括旋转、缩放、平移等。
当我们对图片进行旋转时，默认的中心点是图片的中心点。如果需要改变旋转的中心点，可以通过设置transform-origin的值来实现。
比如，下面的CSS样式对图片进行旋转，并把旋转中心点设置在左上角。

img {
   transform: rotate(45deg);
   transform-origin: top left;
} 

其中，top left的值代表把旋转中心点设置在图片的左上角。
同样，如果需要把旋转中心点设在右下角，可以这样写：

img {
   transform: rotate(45deg);
   transform-origin: bottom right;
} 

其中，bottom right的值表示把旋转中心点设置在图片的右下角。
除了top left和bottom right，还可以使用其他关键字或者数值来改变旋转中心点的位置。比如，center表示将旋转中心点设在图片的中心位置，50% 50%则表示旋转中心点位于图片的正中央。
总之，transform-origin属性可以帮助我们实现对图片旋转中心点的精准控制，达到更好的视觉效果。