css3设置圆旋转

CSS3提供了许多新的特性，其中之一是可以通过设置属性实现圆旋转。使用CSS3的transform属性可以轻松地将元素旋转一定角度。下面我们将介绍如何设置CSS3圆旋转。

.rotate {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
  transform: rotate(45deg);
}

首先，我们使用border-radius属性将元素设置为一个圆形。接着，我们使用transform属性，将元素旋转45度。注意，CSS3的transform属性可以设置多种变形效果，包括旋转、缩放、平移等。

.rotate {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

我们也可以使用CSS3的动画属性，设置元素连续不断地旋转。使用@keyframes可以创建动画效果，从初始状态到结束状态，最终实现元素的循环旋转。在上面的代码中，我们将元素旋转360度，动画持续时间为2秒，并且使用linear函数让动画过渡平滑。