HTML卡片翻轉是一種常見的網頁效果，實現它的方法有很多，本文將介紹一種簡單易懂的代碼。

<div class="card">
<div class="front" style="background-color: #f33">
<h2>正面內容</h2>
<p>這是卡片的正面</p>
</div>
<div class="back" style="background-color: #3f3">
<h2>反面內容</h2>
<p>這是卡片的反面</p>
</div>
</div>

首先，使用div標簽創建一個名為“card”的容器，它將包含正面和反面內容。

接著，為“front”類和“back”類分別創建兩個div標簽，分別顯示卡片的正面和反面?？梢栽趕tyle屬性中添加自定義樣式，例如更改背景顏色。

最后，使用CSS代碼來實現卡片的翻轉：

.card {
position: relative;
transform-style: preserve-3d;
transition: all 0.5s ease;
}
.front, .back {
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
.back {
transform: rotateY(180deg);
}
.card:hover {
transform: rotateY(180deg);
}

通過設置容器的position屬性為relative，以及設置transform-style和backface-visibility屬性，來實現卡片的3D翻轉效果。使用transition屬性和:hover偽類來實現卡片翻轉的平滑過渡效果。

這樣，一個簡單的HTML卡片翻轉效果就完成了！