css图片旋转正反

在网页设计中，图片的使用不仅能够增加页面的吸引力，而且能够丰富页面的内容。而在图片的使用过程中，图片的效果也是非常重要的，比如图片旋转的效果。那么，下面就介绍一下如何使用CSS实现图片旋转的正反效果。

img{
transition: all 0.5s ease-out;
}
img:hover{
transform: rotate(360deg);
}
img.reverse{
transform: rotate(-360deg);
}

如上代码所示，首先我们需要添加一个CSS3的过渡效果，即transition。通过transition属性，我们可以设置元素从一种状态过渡到另一种状态的速度和方式。在这里，我们设置了图片在鼠标悬停时经过0.5秒的渐变过渡效果。

接着，我们使用CSS3的transform属性来实现图片的旋转效果。通过设置transform:rotate(360deg)，我们可以让图片在鼠标悬停时顺时针旋转360度。这样就实现了图片旋转的正向效果。

而要实现图片旋转的反向效果，则需要给图片设置一个类名为reverse的样式。在该样式中，我们设置了transform:rotate(-360deg)，实现了图片逆时针旋转360度的效果。

通过以上步骤，我们就可以轻松地使用CSS实现图片旋转的正反效果。这不仅能够增加页面的视觉效果，而且也能够让页面内容更加生动有趣。