隨著互聯(lián)網(wǎng)技術(shù)不斷發(fā)展，現(xiàn)在的網(wǎng)頁設(shè)計(jì)越來越精美，卡片翻轉(zhuǎn)效果成為了越來越流行的一種設(shè)計(jì)風(fēng)格。這種效果可以給用戶帶來極佳的交互體驗(yàn)，也是現(xiàn)在網(wǎng)頁設(shè)計(jì)中最熱門的效果之一，那么怎樣實(shí)現(xiàn)這種效果呢？

.card{
position:relative;
width:300px;
height:200px;
transform-style:preserve-3d; //3D空間
transition: transform 1s;
}
.card__face{
position:absolute;
backface-visibility:hidden; //指定不顯示反面
width:100%;
height:100%;
text-align:center;
font-size:24px;
line-height:200px;
}
.card__face--front{
background:lightgreen;
}
.card__face--back{
transform:rotateY(180deg); //指定翻轉(zhuǎn)角度為180度
background:lightblue;
}
.card:hover{
transform: rotateY(180deg); //鼠標(biāo)懸浮時(shí)翻轉(zhuǎn)
}
Front Face
Back Face

如上代碼即是實(shí)現(xiàn)卡片翻轉(zhuǎn)效果的經(jīng)典代碼，它使用了CSS3中的3D空間屬性和翻轉(zhuǎn)角度屬性，給出了一個(gè)簡(jiǎn)單直接的示例。通過設(shè)置card元素為3D空間，再通過設(shè)置兩張card__face卡片的樣式，一張為正面，一張為背面，然后設(shè)置卡片翻轉(zhuǎn)的角度為180度，最后在:hover時(shí)改變卡片狀態(tài)即可。這種效果僅需幾行CSS代碼，便能快速實(shí)現(xiàn)一個(gè)炫酷的效果。