单击 CSS 时旋转图标

在Web开发中，经常需要在用户交互中使用图标代表各种操作，而其中一种常见的需求是在用户单击某个选项时，让图标旋转。本篇文章将介绍如何使用CSS来实现这一效果。

实现思路

要实现图标旋转的效果，我们可以使用CSS中的transform属性。该属性可以用来对一个元素进行旋转、缩放等变换操作。我们可以将具备旋转效果的样式保存在一个CSS类中，并且在用户点击时动态地将该类应用到目标元素上。

实现代码

下面是一段HTML代码，其中包含一个图标和一个按钮。当用户单击按钮时，我们会将rotate类应用到图标上，从而使其旋转：

<!-- HTML代码 -->
<div class="container">
  <i class="icon fas fa-cog"></i>
  <button id="rotate-button">旋转</button>
</div>

<!-- 引入 FontAwesome 字体库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<!-- CSS代码 -->
<style>
  .rotate {
    transform: rotate(180deg);
  }
</style>

<!-- JavaScript代码 -->
<script>
  const icon = document.querySelector('.icon');
  const rotateButton = document.querySelector('#rotate-button');

  rotateButton.addEventListener('click', () => {
    icon.classList.toggle('rotate');
  });
</script>

从上述代码中可以看到，我们引入了 FontAwesome 字体库，并且在HTML中使用了其中的一个图标（类名为fa-cog）。在CSS中，我们定义了一个rotate类，其中的transform属性可以使元素顺时针旋转180度。在JavaScript中，我们使用了事件监听器来监听按钮的点击事件，并且动态地将rotate类应用到图标上。

总结

使用CSS的transform属性可以轻松地实现图标旋转效果。结合JavaScript，我们可以根据用户交互动态地添加或删除元素的样式。在实际开发中，我们可以根据自己的需求定制更加复杂的动画效果，以提升用户体验。