css3实现旋转

CSS3中实现元素的旋转，可以使用transform属性中的rotate()函数。

例如，要将一个元素旋转45度，可以这样写：




.rotated-element {
  transform: rotate(45deg);
}

在HTML中应用这个类：




<div class="rotated-element">这是一个旋转了的元素</div>

旋转的中心默认是元素的中心，如果需要改变旋转的中心，可以使用transform-origin属性。例如，将旋转中心设置为左上角：




.rotated-element {
  transform-origin: left top;
  transform: rotate(45deg);
}

旋转动画可以通过CSS动画实现：




@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
.rotated-element {
  animation: rotateAnimation 2s linear infinite;
}

这段代码定义了一个名为rotateAnimation的关键帧动画，它从0度旋转至360度，持续时间为2秒，并且无限循环。

评论已关闭

推荐阅读