CSS3 地球公轉是前端開發中非常有趣的一個主題，通過 CSS3 的 animate 和 transform 屬性，可以簡單而強大地實現一個非常逼真的地球公轉效果。

.earth {
width: 300px;
height: 300px;
position: relative;
margin: 50px auto;
transform-style: preserve-3d;
animation: earthRotate 20s infinite linear;
}
@keyframes earthRotate {
0% {
transform: translateZ(-120px) rotateY(0);
}
100% {
transform: translateZ(-120px) rotateY(360deg);
}
}
.earth img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
transform: rotateY(90deg) rotateZ(-23.4deg);
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0.3) 80%);
}

通過上面的 CSS 代碼，我們可以實現一個非常逼真的地球公轉效果。首先，我們定義了一個 .earth 的容器，通過設置 width、height 和 position 屬性，設置容器大小和相對位置。然后，我們設置了 transform-style 屬性，設置容器為 3D 樣式，并且通過 animation 屬性，設置容器執行一個名為 earthRotate 的旋轉動畫，在 20 秒內無限次循環，同時線性執行。

接下來，我們需要定義 .earth 下的 img 元素。通過設置 position、top、left、width、height 和 border-radius 屬性，設置 img 元素的位置、大小和圓角樣式。然后，通過設置 transform 屬性，設置旋轉軸心和角度，讓 img 元素具有旋轉效果。最后，通過設置 -webkit-box-reflect 屬性，設置 img 元素的反射效果，使地球表面具有光澤感。

上面是一個簡單而強大的 CSS3 地球公轉效果，通過學習這個實例，你可以更深入地了解 CSS3 動畫和變換屬性的應用，以及掌握如何制作更多優秀的網頁效果。希望你能夠喜歡！