[分享]css3控制div无限旋转

CSS3拥有许多强大的属性，其中一个非常有趣的功能是控制div的无限旋转。以下是如何使用CSS3控制div旋转的简单示例：

 .box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
  }
  
  @-webkit-keyframes rotate {
    from { 
      -webkit-transform: rotate(0deg); 
    }
    to { 
      -webkit-transform: rotate(360deg); 
    }
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  } 

在上面的示例中，我们首先将一个div元素命名为.box。然后，我们设置其宽度和高度，并为其设置了一个红色的背景颜色。

接下来，我们使用position属性将其设置为相对元素，并添加了两个动画属性。我们使用-webkit-animation和animation CSS属性来定义rotate属性，并将其设置为循环不断地旋转。在此示例中，我们定义了一个线性计时函数，以时间间隔2秒进行旋转。

最后，在@keyframes选项卡中，我们定义了旋转动画的开始和结束状态。我们将.box的角度从0度开始旋转，并将其顺时针旋转360度，导致无限旋转的效果。

使用CSS3控制div旋转非常容易。通过结合使用animation和@keyframes属性，我们可以定义旋转的角度、持续时间、动画速度等等。这是一种非常强大且有趣的CSS3属性，它可以使您的网站更加生动和吸引人。