[分享]css做围绕元素中心旋转

CSS是Web界面开发的必备语言，它担负了界面设计中的很多任务，其中一项常见的任务是对元素的旋转。本文将讲述如何用CSS让元素围绕它的中心点旋转。 / CSS代码实现：/ .element{ : re...

CSS是Web界面开发的必备语言，它担负了界面设计中的很多任务，其中一项常见的任务是对元素的旋转。本文将讲述如何用CSS让元素围绕它的中心点旋转。

/* CSS代码实现：*/
.element{
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 将元素定位到屏幕中心 */
  transform-origin: center center;
  /* 设置元素旋转中心为元素的中心点 */
  animation: rotate 2s infinite linear;
  /* 设置旋转动画 */
}

@keyframes rotate{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
  /* 设置旋转动画的过渡效果 */
} 

在代码中，我们首先将元素转移到屏幕中心并将其的旋转中心点设置在元素的中心，然后通过关键帧动画在2秒钟内让元素顺时针旋转360度。这样就实现了围绕元素中心旋转的效果。

用CSS实现围绕元素中心旋转是一个非常简单的任务，它不仅可以运用到图标、图形等元素上，还可以用在页面菜单等UI设计上，增加了网页的动态效果和生动性。