css中鼠标点击图片旋转（css鼠标经过图片旋转）

CSS中常常使用鼠标事件来增强网页的交互效果，其中就包括鼠标点击图片旋转的效果。下面我们演示一下实现的方法。

/* HTML代码 */div class="wrapper">
    img class="rotateImg" src="image.jpg">
    /div>
/* CSS代码 */.wrapper {
    width: 200px;
    height: 200px;
    margin: 50px auto;
    position: relative;
}
.rotateImg {
    width: 100%;
    height: 100%;
    transition: transform .6s ease;
}
.rotateImg:hover {
    transform: rotate(360deg);
}
    

代码解释：

我们先在HTML代码中定义一个div容器，容器中包含了一个图片元素。为了让图片在div容器中居中显示，我们使用了margin属性和position属性。

在CSS代码中，我们给容器和图片都设置了宽度和高度，并将图片的宽度和高度设置为100%，让图片自适应容器大小。然后，我们为图片添加了一个过渡效果，设置过渡时间为0.6秒，过渡动画为“transform:rotate(360deg)”。

最后，我们为图片添加了一个:hover伪类，表示鼠标悬停在图片元素上时触发事件。这里我们将图片元素的transform属性设置为“rotate(360deg)”来实现旋转效果。

这样，当用户鼠标点击图片时，图片就会顺时针旋转360度。你也可以根据需要调整过渡时间和旋转角度。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！