css3 行星旋转

CSS3 行星旋转是一种非常炫酷的效果，可以为网站增添不少视觉上的乐趣。

实现行星旋转效果的方法很简单，只需要利用 CSS3 中的 transform 属性就可以了。首先需要定义一个行星的 div，然后在 CSS 中添加如下样式：

.planet {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #FFD700;
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
animation: rotateInfinite 10s linear infinite;
}
@keyframes rotateInfinite {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

上述代码中，我们通过 transform: rotate() 属性定义了行星的旋转方向和速度。通过 animation 属性，我们为行星添加了一个无限循环的旋转动画，可以让行星一直旋转下去。

此外，我们还必须设置行星的位置，这里利用了 position 和 margin 属性来实现居中定位。最终效果如下：

查看更多关于css3 行星旋转的详细内容...