CSS3 animation 实现地球转动

可以使用CSS3的动画特性来实现地球旋转的效果，具体步骤如下：

1.创建一个 div 元素作为地球的容器，并设置其宽度和高度为相同的值，以达到正圆的效果。

2.为该元素添加 background-image 属性，设置地球的背景图片。

3.使用 CSS3 的 transform 属性来旋转该元素。具体来说，可以使用 rotate() 函数来实现旋转，如：transform: rotate(360deg)。

4.使用 animation 属性来控制动画效果。设置 animation-name 为 rotate，animation-duration 为 10s，animation-iteration-count 为 infinite，表示让动画无限循环播放。

代码示例：

<div class="earth"></div>

.earth {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: url(earth.png);
  background-size: contain;
  background-repeat: no-repeat;
  animation-name: rotate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

以上代码会使得地球永远绕着自己的轴心旋转，从而实现地球转动的效果。