[分享]css3按远点无线旋转

CSS3是现代UI设计和网页开发中必不可少的技术之一。其中，按远点无线旋转是CSS3中非常炫酷的效果之一，可以通过设置transformorigin和transform属性来实现。/ 设置元素的初始位...

CSS3是现代UI设计和网页开发中必不可少的技术之一。其中，按远点无线旋转是CSS3中非常炫酷的效果之一，可以通过设置transform-origin和transform属性来实现。

/* 设置元素的初始位置和旋转点 */
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  transform-origin: center center;
}

/* 设置动画效果和时间 */
.box:hover {
  animation: spin 2s ease-in-out forwards;
}

/* 定义动画细节 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 

上述代码中，我们首先定义了一个名为.box的元素，将其定位在屏幕中央，并设置它的宽度和高度为200px。接着，我们设置了该元素的transform-origin为中心点center，这样我们后续的旋转效果就会围绕着这个中心点来进行。

接着，我们定义了一个:hover伪类，也就是当用户鼠标移动到这个元素上时，由CSS3动画引擎来控制.transform属性，并且动画持续时间为2秒，速率为ease-in-out。最后，我们定义了一个名为spin的动画，表示从初始状态0%开始，旋转角度为0度。然后再到最终状态100%时，旋转角度为360度，这样就完成了整个360度的旋转效果。

在实际应用中，您可以根据需要来更改.transform-origin的值来改变旋转中心点的位置，也可以更改动画的持续时间和速率来实现不同的动画效果。