如何使用 CSS 和 JavaScript 在点击时旋转图像？

使用纯 CSS 在点击时进行 CSS3 转换

为了使用纯 CSS 实现点击时图像旋转，我们遇到了现有代码在悬停时旋转的挑战。让我们关注纯 CSS 解决方案。

解决方案：

仅 CSS：

<code class="css">.crossRotate:active {
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
}</code>

此解决方案使用 :active 伪类，单击图像时会触发旋转。但是，单击后变换不会持续。

对于持久变换，我们需要引入 JavaScript：

<code class="javascript">$( ".crossRotate" ).click(function() {
    if (  $( this ).css( "transform" ) == 'none' ){
        $(this).css("transform","rotate(45deg)");
    } else {
        $(this).css("transform","" );
    }
});</code>

此 jQuery 代码根据当前值切换变换。如果变换为“无”，则应用 45 度旋转；否则，它会删除变换。

以上是如何使用 CSS 和 JavaScript 在点击时旋转图像？的详细内容。更多信息请关注PHP中文网其他相关文章！