[分享]css中实现鼠标经过图片旋转

CSS中实现鼠标经过图片旋转非常简单，只需要使用CSS3的transform属性即可。首先，我们需要准备一张需要旋转的图片： 接下来，我们给这张图片添加一个旋转的效果。我们可以使用:hover选择器来...

CSS中实现鼠标经过图片旋转非常简单，只需要使用CSS3的transform属性即可。

首先，我们需要准备一张需要旋转的图片：

<img src="image.jpg" alt="image"> 

接下来，我们给这张图片添加一个旋转的效果。我们可以使用:hover选择器来控制鼠标悬停在图片上时旋转的效果，如下所示：

img:hover {
    transform: rotate(180deg);
} 

其中，rotate()函数用于控制旋转角度，单位为deg（度）。这里我们将角度设置为180度，也就是图片将被旋转180度。

如果我们想让旋转效果更加平滑，可以添加transition属性：

img {
    transition: transform .5s ease;
} 

这里我们设置了一个0.5秒的过渡效果，使图片旋转更加缓慢、柔和。

最终的代码如下：

<style>
img {
    transition: transform .5s ease;
}

img:hover {
    transform: rotate(180deg);
}
</style>

<img src="image.jpg" alt="image"> 

这样，我们就成功实现了鼠标经过图片旋转的效果。