CSS實現翻牌子功能常用于展示商品介紹等場景，讓頁面更加生動有趣。本文將介紹如何通過CSS實現翻牌子功能。

.card-container {
position: relative;
width: 200px;
height: 200px;
perspective: 1000px;
}
.card {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform .6s;
}
.card:hover {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.front {
background-color: #F4B400;
transform: rotateY(0deg);
}
.back {
background-color: #18BC9C;
transform: rotateY(180deg);
}

首先我們需要創建一個包含翻牌子的容器.card-container，設置它的寬度、高度以及視角。之后創建兩個面.front和.back，并為它們設置backface-visibility: hidden，用于避免背面的內容在正面顯示。接著，我們將兩個面都絕對定位，并設置transform-style: preserve-3d。隨后，在鼠標懸停時，通過設置transform: rotateY(180deg)實現翻轉效果。最后，給正面和背面設定不同的背景色，讓它們看起來更加真實。