在前端開(kāi)發(fā)中，CSS觸摸翻轉(zhuǎn)是一種常用的交互效果，可以為網(wǎng)頁(yè)增添生動(dòng)的視覺(jué)效果。接下來(lái)，我們將介紹如何使用CSS實(shí)現(xiàn)觸摸翻轉(zhuǎn)

.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; /* 防止翻轉(zhuǎn)時(shí)出現(xiàn)鏡像 */
}
.card-back {
transform: rotateY(180deg);
}

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