CSS 中有一種非常酷的效果，就是可以通過鼠標點擊來旋轉圖標。這種效果給網站增添了很多樂趣，讓用戶更容易地與頁面進行交互。

i.inverted{
display:inline-block;
font-style:normal;
white-space: nowrap;
cursor: pointer; /*將光標變成手型*/
transition: 0.3s transform ease-in;
transform-origin: 50% 50%;
}
i.inverted:active{
transform: rotate(180deg);
}

這段 CSS 代碼中使用了偽元素 i，表示圖標。inverted 類可以讓圖標有反色效果，使其更加醒目。transform 屬性可以實現旋轉效果。

在偽類中，我們使用了 :active，表示當圖標被點擊時就會進行旋轉。這里使用了 rotate 函數，傳入參數180deg，表示將圖標旋轉 180 度。

這個效果用在網站中，非常適合讓用戶找到可以點擊的元素，增加了友好性和可用性。