[分享]css3怎么围绕着图形中心旋转

CSS3中提供了很多强大的旋转样式，包括围绕着图形中心旋转的样式。这些旋转样式可以为网页设计增加趣味和创意。/ 基本的旋转样式，使用transform属性 / .element { transform...

CSS3中提供了很多强大的旋转样式，包括围绕着图形中心旋转的样式。这些旋转样式可以为网页设计增加趣味和创意。

/* 基本的旋转样式，使用transform属性 */
.element {
   transform: rotate(30deg);
}

/* 围绕着中心旋转 */
.element {
   /* 水平和垂直居中 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(30deg);
} 

在上面的代码中，我们使用了translate属性来使图形居中，然后使用rotate属性对其进行旋转。注意，我们先使用translate将图形平移了一定的距离，然后才进行旋转，这样才能实现围绕着图形中心旋转。

/* 实现无限旋转 */
.element {
   animation-name: spin;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
}

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

上面的代码展示了如何使用CSS3动画实现无限旋转。我们使用了@keyframes关键字来创建动画，然后将其应用到元素中。注意，我们使用了animation-iteration-count属性来让动画无限循环。

希望这些代码能够帮助你实现图形中心旋转效果！