如何仅使用 CSS 在单击时将图像旋转 45 度？-css教程-PHP中文网

如何仅使用 CSS 在单击时将图像旋转 45 度？

DDD

发布： 2024-10-29 13:19:29

原创

1087 人浏览过

How can I rotate an image 45 degrees on click using only CSS?

使用纯 CSS 在点击时对图像进行 CSS3 动画

在本文中，我们将探索如何在点击时将图像旋转 45 度纯CSS，不依赖JavaScript。

初始代码

您已提供以下CSS：

<code class="css">img {
    display: block;
    margin: 20px;
}

.crossRotate {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
     transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;
}

.crossRotate:hover {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
     transform: rotate(45deg);
}</code>

登录后复制

此代码当前用于旋转动画悬停时，但它不响应点击。

纯 CSS 解决方案

要使用纯 CSS 实现点击时旋转，您可以使用 :active 选择器。校正后的 CSS 应该如下所示：

<code class="css">.crossRotate {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
     transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;
}

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

登录后复制

现在，当您单击图像时，它将旋转 45 度。但是，释放单击后它将保持旋转状态。如果您希望图像在每次点击后恢复到原始状态，则需要使用 JavaScript。

JavaScript 解决方案

使用 JavaScript，您可以切换单击时旋转如下：

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

登录后复制

此代码检查图像的当前变换。如果为“none”，则表示图像未旋转，因此会将其旋转 45 度。如果不是“无”，它将重置转换，将图像返回到其原始状态。

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