在網頁設計中，CSS 地球旋轉卡片是一種很有趣的效果，可以讓網頁看起來非常炫酷。該效果主要基于 CSS3 中的 transform 屬性和一些簡單的動畫。下面我們來詳細了解一下如何實現這個效果。

.card {
position: relative;
width: 300px;
height: 300px;
border-radius: 10px;
perspective: 1000px;
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card__face--front {
transform: rotateY(0deg); 
}
.card__face--back {
transform: rotateY(180deg);
}
.card:hover .card__face--front {
transform: rotateY(-180deg);
}
.card:hover .card__face--back {
transform: rotateY(0deg);
}
.card__inner {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.earth {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateY(0deg) rotateZ(23.5deg);
}
.earth:hover {
animation: spin 10s linear infinite;
}
@keyframes spin {
100% { 
transform: translate(-50%, -50%) rotateY(360deg) rotateZ(23.5deg);
}
}

上面的代碼實現了一個基本的 CSS 地球旋轉卡片。我們首先創建了一個名為 card 的容器，并設置了一些基本的樣式和透視效果，然后在容器中創建了兩個卡片面容器，分別為 card__face--front 和 card__face--back。我們使用 transform 屬性來旋轉卡片面（front 和 back），并使用 backface-visibility 屬性確保卡片的背面不可見。

我們也設置了 .card:hover .card__face--front 和 .card:hover .card__face--back 選擇器來控制鼠標懸停時卡片的旋轉效果。當鼠標懸停在 .card 上時，卡片面將在 Y 軸上旋轉 180 度。

接下來，我們創建了一個名為 .card__inner 的容器，并對其應用 3D transform：preserve-3d 屬性，以保留子元素的 3D 坐標系。

最后，我們在卡片內部添加了一個名為 .earth 的容器，用于承載地球的圖片。我們使用 translate、rotateY 和 rotateZ 屬性來設置地球的位置和旋轉。當鼠標懸停在地球上方時，地球將在 Z 軸上旋轉。

在 hover 選擇器的末尾，我們添加了一個名為 spin 的動畫，用于在 Z 軸上旋轉地球，使其看起來像是繞著卡片旋轉。該動畫將在 10 秒內線性無限循環。

在這里，我們只是介紹了一個基本的 CSS 地球旋轉卡片效果，但是通過繼續探索 CSS3 中的 transform 屬性和動畫功能，我們可以創造出更加令人驚嘆的效果。