[分享]css3图片以图片中心旋转

CSS3中旋转图片是非常简单的，只需要使用transform属性，再加上rotate()函数即可。而如果要实现以图片中心进行旋转，还需要再添加一些代码。首先，我们需要先对图片进行定位，设置为绝对定位，...

CSS3中旋转图片是非常简单的，只需要使用transform属性，再加上rotate()函数即可。而如果要实现以图片中心进行旋转，还需要再添加一些代码。

首先，我们需要先对图片进行定位，设置为绝对定位，并将left和top属性设置为50%，使其在父元素的正中心。

img {
   position: absolute;
   left: 50%;
   top: 50%;
} 

接下来，我们需要使用transform-origin属性来设置旋转的中心点。该属性默认值为50% 50%，即元素的中心点。所以我们只需要对该属性进行设置即可。

img {
   transform-origin: center;
} 

最后，我们只需要添加旋转的代码即可。使用rotate()函数，输入旋转的角度即可。例如下面代码就是将图片以中心点进行旋转90度。

img {
   transform: rotate(90deg);
} 

综上，以上代码便可以实现以图片中心点进行旋转的效果。在实际使用时，还可以通过animation属性来实现动态旋转，达到更加生动的效果。