CSS地球運轉模型是一項以CSS技術為基礎，實現地球日夜交替、自轉、公轉等動畫效果的工程。它基于CSS旋轉、位移和動畫等屬性，通過設置不同的值和參數，讓圖像實現各種動態變化。

/* 地球自轉動畫 */
@keyframes spin {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
.earth {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
background-image: url(earth.jpg);
background-size: cover;
animation: spin 5s linear infinite; /* 轉動時間和類型 */
}
/* 月球公轉動畫 */
@keyframes orbit {
from {
transform: translateX(100px) rotate(0);
}
to {
transform: translateX(100px) rotate(360deg);
}
}
.moon {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border-radius: 50%;
background-color: white;
animation: orbit 3s linear infinite; /* 公轉時間和類型 */
}

在這段代碼中，.earth代表地球，使用了CSS中的animation屬性，讓其自轉。通過@keyframes定義自轉動畫的周期、類型和角度變化。.moon代表了月球，使用絕對定位，通過設定translateX沿X軸平移，實現公轉軌跡。公轉動畫同樣使用了@keyframes，控制月球每一次從起點到終點的運動狀態。

CSS地球運轉模型實現了非常生動的視覺效果，是一項應用廣泛的CSS技術。