CSS3中提供了許多炫酷的效果，例如翻牌效果，可以讓網頁展現出吸引人的視覺效果。接下來我們就來學習如何用CSS3實現翻牌效果。

/* HTML結構 */
<div class="card">
<div class="front">
<p>這是正面</p>
</div>
<div class="back">
<p>這是背面</p>
</div>
</div>
/* CSS樣式 */
.card {
width: 200px;
height: 200px;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}
.card:hover {
transform: rotateY(180deg);
}
.front, .back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
}
.front {
background-color: #f8eb74;
transform: rotateY(0deg);
}
.back {
background-color: #e9776c;
transform: rotateY(180deg);
}

我們首先來看HTML結構，我們需要一個包含正面和背面的div標簽，在正面和背面的div標簽中分別使用p標簽展示文字內容。

接下來是CSS樣式，因為需要實現翻轉效果，所以我們需要在.card類中設置transform-style: preserve-3d屬性，并在.card:hover類中設置transform: rotateY(180deg)屬性，這樣當鼠標移入時就會出現翻轉效果。

同時，我們還需要設置.front和.back類的寬高為100%，并設置它們為絕對定位，此時我們需要使用backface-visibility: hidden屬性來修復因翻轉造成的視圖混亂問題。另外，在.front類中設置背景顏色為黃色，在.back類中設置背景顏色為紅色，并設置.rotateY(180deg)來使其翻轉到背面展示。