CSS是一種用于創(chuàng)建和設(shè)計(jì)網(wǎng)頁(yè)的語(yǔ)言，它可以讓網(wǎng)頁(yè)變得更加美觀(guān)和交互性更強(qiáng)。其中一種常見(jiàn)的效果是圖標(biāo)翻轉(zhuǎn)180度，這種效果可以在滿(mǎn)足特定條件時(shí)應(yīng)用于元素，如當(dāng)懸停在元素上時(shí)。下面介紹如何使用CSS實(shí)現(xiàn)這樣的效果。

/*HTML代碼*/
<div class="box">
<i class="icon"></i>
</div>
/*CSS代碼*/
.box {
width: 100px;
height: 100px;
background-color: #ccc;
position: relative;
/*鼠標(biāo)懸停時(shí)候，圖標(biāo)翻轉(zhuǎn)*/
&:hover .icon {
transform: rotate(180deg);
}
}
.icon {
width: 50px;
height: 50px;
background-color: #000;
position: absolute;
left: 25px;
top: 25px;
transition: transform .3s ease-in-out;
}

上述代碼中，我們首先創(chuàng)建了一個(gè)盒子和圖標(biāo)元素。盒子使用相對(duì)定位，圖標(biāo)使用絕對(duì)定位。透過(guò)對(duì)圖標(biāo)元素進(jìn)行CSS動(dòng)畫(huà)，通過(guò)向其應(yīng)用“transform：rotate（180deg）”聲明，在鼠標(biāo)懸停時(shí)將其翻轉(zhuǎn)180度。此外，還需要添加過(guò)渡效果，以使圖標(biāo)翻轉(zhuǎn)動(dòng)畫(huà)更加平滑。