html5 css3做圆周运动,css实现圆周运动
自身旋转
旋转元素，首先想到的就是rotate这个属性。
.circle {
width: 30px;
height: 30px;
background: #aaa;
animation: spin 3s linear;
}
@keyframes spin{
to {
transform: rotate(1turn);
}
}
绕圆旋转
rotate可以实现旋转，但只是绕自身旋转，是以其中心为圆心，进行旋转。如果想实现绕着一个圆进行旋转，则需要多用到一个属性了。
.container {
width: 300px;
height: 300px;
border: 1px dotted red;
border-radius: 50%;
position: relative;
box-sizing: border-box;
}
.circle {
position: absolute;
left: 50%;
top: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background: #aaa;
transform-origin: 0 150px;
animation: spin 3s infinite linear
}
如上代码，增加transform-origin这个属性&#
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！