css3动画效果旋转

CSS3是一种用来为网页添加样式的标准，其中包含众多丰富的动画效果，例如旋转。 在本文中，我们将学习如何使用CSS3的旋转动画效果。

/*旋转动画*/
.rotate{
  animation: rotation 2s infinite linear;
  transform-origin: center center;
}
/*定义旋转动画*/
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

在上面的代码中，我们首先定义了一个.rotate类，同时使用了animation属性来定义动画效果。animation内部需要指定动画的名称、动画持续时间、动画循环次数以及动画速度等参数。

之后使用transform-origin属性来定义旋转的中心点，在这个例子中我们将旋转中心点设为中心位置。

然后我们进入了定义动画的核心代码部分，使用了@keyframes关键字，这个关键字可以用来定义动画中需要的关键帧。在这个例子中我们设置了从0度开始到360度结束的动画，时间长度为2秒，并且无限循环。

现在，我们在HTML中使用.rotate类就能得到旋转动画效果啦！

<div class="rotate">我会旋转！</div>

上面的代码段中只不过是一个简单的div框，通过加上.rotate类，就完成了旋转动画的效果。

CSS3带来了许多丰富的动画效果，旋转动画也是其中之一，希望本文能帮助你更好地理解旋转动画的实现思路，同时也能帮助你更好地运用CSS3动画效果。