css3实现图片旋转效果

CSS3是前端开发中不可或缺的一部分。其中，图片旋转效果是一个常见的特效，今天我们就来学习如何使用CSS3实现图片旋转效果。

img:hover {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

可以看到，在上面的代码中，我们在img:hover样式中使用了transform属性，并设置旋转角度为45度。这样，当鼠标悬停在图片上时，就会呈现出旋转45度的效果。

另外，我们也可以通过设置transition属性来实现旋转动画效果。代码如下：

img {
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}
img:hover {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

在上面的代码中，我们在img样式中设置了transition属性，用于控制旋转效果的过渡时间和过渡方式。具体的实现方式与使用同上。

总之，使用CSS3实现图片旋转效果非常简单，而且可以给网页带来更加生动鲜活的视觉效果，建议开发者们积极尝试。