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

点击时的 CSS3 转换：纯 CSS 方法

在 Web 开发中，转换元素通常是创建引人入胜的功能性界面的关键方面。使用 CSS3 可以实现的一种变换就是旋转。本文探讨了如何利用纯 CSS 在单击时对图像（特别是加号）应用 45 度旋转。

提供的代码成功地在悬停时旋转图像。但是，要实现单击时旋转的所需行为，需要进行一些修改。

在 CSS 中，':active' 伪类表示元素或其后代元素被单击或激活的状态。通过利用这个伪类，我们可以添加一个 CSS 规则，在单击图像时应用旋转变换。

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

实现此规则后，单击图像会将其旋转 45 度。需要注意的是，这种转换是临时的，当单击被释放时，它将恢复到其原始状态。

对于转换在单击事件之外持续存在的更永久的解决方案，可以合并 JavaScript。使用 jQuery，可以通过捕获单击事件并相应地切换旋转转换来实现这一目的。

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

此代码片段在单击图像时切换旋转转换。当图像处于默认状态时，单击它会将其旋转 45 度。再次单击它将恢复到原来的位置。

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