[分享]css中如何图片绕某一点旋转

CSS中的transform属性可以让元素做出各种动画效果，其中包括绕某一点旋转。下面我们就来一起看看如何利用transform来实现这个效果吧。img { / 设置图片的变换为旋转 / transf...

CSS中的transform属性可以让元素做出各种动画效果，其中包括绕某一点旋转。下面我们就来一起看看如何利用transform来实现这个效果吧。

img {
  /* 设置图片的变换为旋转 */
  transform: rotate(30deg);
  /* 以图片中心为旋转点 */
  transform-origin: center center;
} 

如上代码中，我们可以看到首先将图片的变换设置为旋转，这里以30度为例。然后利用transform-origin属性来设置旋转点为图片的中心点，这样图片就会以中心点为旋转中心进行旋转。

img {
  /* 设置图片的变换为旋转 */
  transform: rotate(30deg);
  /* 以图片左上角为旋转点 */
  transform-origin: left top;
} 

如果想要改变旋转点的位置，只需要改变transform-origin的值就可以了。例如，这里设置旋转点为图片的左上角。

需要注意的是，transform-origin的值是相对于元素本身的，可以使用百分比、像素等单位进行设置。并且，可以通过设置多个transform属性来实现复合变换效果。