[分享]css3怎么设置永久旋转

在CSS3中，我们可以使用transform属性来实现元素的旋转效果。其中，transform属性可以实现一个或多个变化，包括旋转、缩放、移动和倾斜等，而且不会影响文档流。想要设置永久旋转的元素，我们...

在CSS3中，我们可以使用transform属性来实现元素的旋转效果。其中，transform属性可以实现一个或多个变化，包括旋转、缩放、移动和倾斜等，而且不会影响文档流。

想要设置永久旋转的元素，我们可以通过CSS3中的关键帧动画（@keyframes）来实现。具体步骤如下：

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

上述代码定义了一个名称为rotate的关键帧动画，其中0%表示旋转的起始状态，transform的rotate(0deg)表示不进行旋转；100%表示旋转的结束状态，transform的rotate(360deg)表示360度旋转。

接下来，我们需要使用animation属性来调用这个动画：

.box {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  animation: rotate 3s linear infinite; 
}

上述代码中，我们给一个.box元素添加了rotate动画，并设置了3秒线性动画，无限循环旋转。

最终效果如下：