CSS圖標的點擊旋轉是一種常用的動畫效果，可以使頁面更加生動有趣。下面，我將介紹如何實現(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)建了一個包含圖標的div元素。在CSS中，我們設置了該div元素的寬度、高度以及背景圖像，然后使用transition屬性設置了旋轉動畫的時間。我們使用:hover偽類和.active類來觸發(fā)旋轉動畫。

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

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