旋转图标 - CSS

旋转图标是网页设计中常使用的效果之一。通过CSS中的transform属性，我们可以很方便的实现旋转图标，而且还支持动画效果。本文将介绍几种常见的实现方法。

CSS transform属性

CSS中的transform属性可以实现元素的旋转、缩放、平移等变换效果。其中旋转效果可使用rotate()函数实现。

语法

transform: rotate(angle);

其中，angle表示旋转角度，可以使用度数或弧度数表示。正数表示顺时针方向旋转，负数表示逆时针方向旋转。

例如，要顺时针旋转45度，可以写作：

transform: rotate(45deg);

旋转图标大小不变

如果要实现一个的旋转图标，且大小不变，可使用伪元素和绝对定位来实现。首先，给元素添加position:relative属性，然后在元素内部创建一个伪元素，如下所示：

.icon {
  position: relative;
  width: 20px;
  height: 20px;
}
.icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-image: url("icon.png");
}

接下来，通过rotate()函数实现旋转效果，如下所示：

.icon.active::before {
  transform: rotate(45deg);
}

旋转图标大小改变

如果要实现一个大小会改变的旋转图标，可使用动画效果与伪元素相结合。首先，设置元素的宽和高，然后为元素的伪元素添加keyframes动画，如下所示：

.icon {
  width: 20px;
  height: 20px;
}
.icon::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url("icon.png");
  animation: rotate 2s infinite linear;
}
@keyframes rotate {
  from {transform: rotate(0)}
  to {transform: rotate(360deg)}
}

此时，图标会无限旋转，但宽高不会改变。如果希望图标随着旋转变大或变小，可以在keyframes中设置缩放效果：

@keyframes rotate {
  from {transform: rotate(0) scale(1)}
  to {transform: rotate(360deg) scale(0.5)}
}

总结

通过CSS的transform属性，我们可以实现简单的旋转图标。如果要实现一些复杂的效果，可以结合其他CSS属性和JavaScript来实现。