CSS卡片翻轉(zhuǎn)一次變一張是一種常見的效果，可以用于網(wǎng)站的個人介紹、產(chǎn)品展示等頁面。這一效果的實現(xiàn)離不開CSS3的3D轉(zhuǎn)換技術(shù)。

.card {
width: 300px;
height: 200px;
perspective: 1000px;
}
.card-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
.card:hover .front {
transform: rotateY(-180deg);
}
.card:hover .back {
transform: rotateY(0deg);
}

上面的代碼實現(xiàn)了一個簡單的卡片翻轉(zhuǎn)效果。首先我們需要一個具有透視效果的容器，這里使用了perspective屬性。然后將容器中的兩個元素分別設(shè)為正面和背面，設(shè)置其position為absolute，覆蓋在一起，同時設(shè)定transform-style為preserve-3d。

接著，我們通過給hover狀態(tài)下的樣式進行transform屬性的變換，使前后兩個元素翻轉(zhuǎn)，并顯示不同的內(nèi)容。這就實現(xiàn)了卡片翻轉(zhuǎn)一次變一張的效果。

需要注意的是，在移動端或老舊瀏覽器中，可能無法兼容或動畫效果較差。此時，可以考慮使用JavaScript等技術(shù)進行優(yōu)化。