CSS中实现鼠标经过图片旋转非常简单,只需要使用CSS3的transform属性即可。首先,我们需要准备一张需要旋转的图片:<img src="image.jpg&am
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">
这样,我们就成功实现了鼠标经过图片旋转的效果。
粉丝
0
关注
0
收藏
0