CSS3地球旋轉效果是一種非常有趣的設計效果，可以讓網站變得更加生動和有趣。下面我們來學習一下如何實現這個效果。

.earth{
width:200px;
height:200px;
border-radius:50%;
position:relative;
perspective:1000px;
background:url(earth.jpg) no-repeat center center;
background-size:cover;
animation:rotate 10s infinite linear;
}
@keyframes rotate{
0%{transform:rotateY(0deg);}
100%{transform:rotateY(360deg);}
}
.earth .moon{
width:30px;
height:30px;
border-radius:50%;
position:absolute;
top:calc(50% - 15px);
left:calc(50% + 100px);
background:url(moon.png) no-repeat center center;
background-size:contain;
animation:rotate-moon 3s infinite linear;
transform-origin:center center -40px;
}
@keyframes rotate-moon{
0%{transform:rotateY(0deg);}
100%{transform:rotateY(-360deg);}
}

我們首先創建一個類名為“earth”的元素，指定寬度和高度為200px，邊界半徑為50%，位置為相對，透視為1000px，背景圖像為地球圖片，設置無限循環的線性動畫，用rotate元素控制元素轉動的方向和速度。

接下來，創建一個類名為“moon”的元素，指定寬度和高度為30px，邊界半徑為50%，位置為絕對，頂部為中心-15px，左側為中心+100px，背景圖像為月球圖片，設置無限循環的線性動畫，用rotate-moon元素控制月球圍繞地球旋轉的方向和速度，原點設置為中心中心-40px。

以上就是CSS3地球旋轉效果的實現過程，希望這個教程能夠幫助到你。