在前端開發中，CSS觸摸翻轉是一種常用的交互效果，可以為網頁增添生動的視覺效果。接下來，我們將介紹如何使用CSS實現觸摸翻轉

.card {
position: relative;
width: 200px;
height: 100px;
perspective: 1000px; /* 3D透視效果 */
}
.card-inner {
position: absolute;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* 防止翻轉時出現鏡像 */
}
.card-back {
transform: rotateY(180deg);
}

在以上代碼中，我們創建了一個名為card的容器，并為它添加了透視效果。在該容器內部，我們創建了一個名為card-inner的容器，并開啟了3D變換。當鼠標懸停在card容器上時，我們通過改變card-inner容器的旋轉角度實現了翻轉的效果。在card-inner容器內部，我們分別創建了card-front和card-back兩個子元素，用于分別顯示卡片正反兩面的內容。需要注意的是，我們需要為.card-back元素添加旋轉180度的效果，以確保卡片的反面能夠正確顯示。