今天我們來學習如何使用 CSS 實現折疊翻轉卡片。這種效果可以讓網頁上的兩段內容在相同的區域內輪流展示，非常適合用來展示相冊、新聞資訊等信息。 首先，我們需要準備兩個 div 區塊，用來展示兩段內容。可以像下面這樣定義：

<div class="card">
<div class="front">
<p>這是正面的內容</p>
</div>
<div class="back">
<p>這是背面的內容</p>
</div>
</div>

然后，我們需要使用 CSS 定義這個卡片的樣式。首先，我們需要通過設置 perspective 屬性來讓其具有立體感：

.card {
position: relative;
width: 200px;
height: 200px;
perspective: 1000px;
}

接著，我們需要設置正反兩面卡片的樣式。我們可以通過設置 position:absolute 將其覆蓋在一起，然后通過 rotateY 屬性讓其沿著 Y 軸旋轉90度：

.front, .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.front {
z-index: 2;
background: #f90;
transform: rotateY(0deg);
}
.back {
background: #06c;
transform: rotateY(90deg);
}

我們通過設置 backface-visibility 為 hidden，可以讓卡片旋轉時不會出現背面的樣式。而 transform-style: preserve-3d 則是讓其具有立體感。 最后，我們需要使用 CSS 動畫來讓卡片實現翻轉效果：

.card:hover .front {
transform: rotateY(-90deg);
}
.card:hover .back {
transform: rotateY(0deg);
}

這里我們使用 :hover 選擇器來觸發動畫效果，當鼠標移到卡片上時，會讓正面卡片向后旋轉，同時讓背面卡片向前旋轉。這樣我們就實現了一個簡單的折疊翻轉卡片效果。 細心的讀者可能已經發現，這里的樣式實現是基于 CSS3 的屬性，可能不兼容一些低版本瀏覽器，所以在實際開發中還需要做一些兼容性處理。