使用CSS3实现围绕圆心旋转
warning:
这篇文章距离上次修改已过203天，其中的内容可能已经有所变动。
要使用CSS3实现元素围绕圆心旋转，可以使用transform属性中的rotate函数。以下是一个简单的例子，演示了如何让一个元素围绕它自己的中心旋转。
HTML:
<div class="rotating-element"></div>CSS:
.rotating-element {
width: 100px;
height: 100px;
background-color: red;
margin: 50px;
animation: rotate 2s infinite linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}在这个例子中，.rotating-element是需要旋转的元素。animation属性定义了一个名为rotate的关键帧动画，该动画会使元素持续地旋转360度，每次旋转时间为2秒，并且无限循环。linear关键字确保旋转速度是均匀的。
评论已关闭