CSS3是一种用于网页设计的新技术，它可以让我们在网页上实现很多有趣的效果，比如说旋转效果。下面我们就来学习一下如何使用CSS3来实现绕地球旋转的效果。

/*首先定义一个地球的div*/
#earth{
width: 200px;
height: 200px;
background-image: url(earth.png);
border-radius: 50%;
position: relative;
margin: 0 auto;
}
/*然后定义一个月亮的div，作为地球的伴星*/
#moon{
width: 50px;
height: 50px;
background-image: url(moon.png);
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
margin: auto;
animation: rotate 10s linear infinite;
}
/*最后定义一个旋转动画，让月亮绕地球旋转*/
@keyframes rotate{
0%{
transform: translate(150px) rotate(0deg) translate(-150px);
}
100%{
transform: translate(150px) rotate(360deg) translate(-150px);
}
}

上面的代码中，我们首先定义了一个地球的div，然后定义一个月亮的div，将其定位在地球的上方，最后使用CSS3的动画效果，让月亮绕地球旋转。

这样，我们就可以在网页上实现一个有趣的绕地球旋转的效果。通过掌握CSS3的相关技术，我们可以创造出更多的有趣效果，让网页变得更加生动、丰富。