CSS圖標(biāo)的點(diǎn)擊旋轉(zhuǎn)是一種常用的動畫效果，可以使頁面更加生動有趣。下面，我將介紹如何實(shí)現(xiàn)這種效果。

HTML代碼：
<div class="icon"></div>
CSS代碼：
.icon{
width: 50px;
height: 50px;
background-image: url("icon.png");
background-repeat: no-repeat;
background-position: center center;
transition: transform 0.5s;
}
.icon:hover, .icon.active{
transform: rotate(180deg);
}

在HTML中，我們創(chuàng)建了一個包含圖標(biāo)的div元素。在CSS中，我們設(shè)置了該div元素的寬度、高度以及背景圖像，然后使用transition屬性設(shè)置了旋轉(zhuǎn)動畫的時(shí)間。我們使用:hover偽類和.active類來觸發(fā)旋轉(zhuǎn)動畫。

當(dāng)鼠標(biāo)懸停在圖標(biāo)上時(shí)，該元素將會旋轉(zhuǎn)180度。當(dāng)我們需要通過JavaScript來控制該元素的旋轉(zhuǎn)時(shí)，我們可以添加.active類來觸發(fā)動畫。

這樣，我們就實(shí)現(xiàn)了CSS圖標(biāo)的點(diǎn)擊旋轉(zhuǎn)效果。這種方法不僅易于使用，而且性能優(yōu)秀，不會影響頁面加載速度。