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的相關技術，我們可以創造出更多的有趣效果，讓網頁變得更加生動、豐富。