如何使用 CSS3 变换在单击时旋转图像？

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

为了增强用户交互，您可能需要使用 CSS3 在点击时转换元素。具体来说，旋转图像以创建十字符号是一项常见任务。虽然悬停是转换的常见触发器，但本文探讨了仅通过 CSS 使用 onClick 事件的可能性。

最初，提供的代码利用悬停事件将图像旋转 45 度。但是，要在单击时触发转换，需要进行修改。

活动状态转换

CSS 提供 :active 伪类，旨在在单击元素时设置元素的样式。通过利用这个伪类，您可以实现所需的行为：

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

单击此代码会将图像旋转 45 度。然而，需要注意的是，一旦释放点击，转换就会消失。这是因为 :active 状态仅在单击期间处于活动状态。

使用 JavaScript 保留转换

如果您希望在单击后保留转换，则需要使用 JavaScript。通过使用 jQuery 捕获点击事件，您可以使用 css() 方法切换转换：

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

在此代码中，将检查转换属性。如果它设置为 none，则应用转换，否则将被删除。这允许您在每次单击时打开和关闭十字符号。

通过利用这些技术，您可以使用单击时的 CSS3 变换有效地旋转图像，无论是否使用 JavaScript 来维持单击之外的变换活动。

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