css实现旋转(css如何旋转地球)

CSS可以非常简单地通过transform属性旋转页面元素，如何使用CSS旋转地球呢？

/* 首先定义地球元素的样式 */
.earth {
width: 200px;
height: 200px;
background-image: url('earth.jpg');
background-size: cover;
border-radius: 100%;
position: absolute; /* 重要：使得元素能够绕中心旋转 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 居中对齐 */
}
/* 定义动画 */
@keyframes rotate-earth {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg); /* 旋转一圈完毕 */
}
}
/* 启用动画，并设置动画周期 */
.earth {
animation: rotate-earth 10s linear infinite;
}

以上代码通过定义一个圆形元素并指定背景图片实现了地球的原型表现。接下来是关键的旋转动画部分，通过定义keyframes以及animation属性，可以将地球元素沿着其中心点旋转360度，实现类似地球公转的效果。

可以通过调整animation的参数，比如duration和timing function实现更加自然的旋转效果。