css3 自旋转

CSS3的自旋转是一项非常有趣和实用的特性。它可以让元素绕其中心点自动旋转。最常见的用途是对于图片或者特殊的图形进行旋转展示。

要实现CSS3的自旋转，我们需要使用transform属性。具体的语法是：

transform: rotate(deg);

其中，deg代表要旋转的度数，取值范围是0~360。

下面是一个常用的例子，实现一个无限自转的太阳：

.sun {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: yellow;
  animation: spin 10s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

我们先定义了一个sun类来设置太阳的样式，接着使用animation属性来启用自转效果。其中，spin为动画的名称，10s代表旋转的时间长度，linear表示线性动画，infinite表示无限循环。

最后在@keyframes里定义动画，让太阳在100%完成度数的时候绕自身中心360度旋转。这样就实现了一个完美的自转太阳！