CSS++ 點擊圖標旋轉，是一種常用的頁面交互方式，通常用于網頁菜單或折疊展開效果等。在實現過程中，我們需要結合 CSS3 動畫和一些簡單的 JavaScript 代碼來實現：

/* CSS3 動畫 */
.rotate {
-webkit-animation: spin 1s ease-in-out;
animation: spin 1s ease-in-out;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

上面的 CSS 代碼定義了一個名為 "rotate" 的類，其中包含了一個 CSS3 動畫效果，用于將圖標旋轉一圈。同時，我們還定義了一個名為 "spin" 的關鍵幀動畫，該動畫從 0% 開始，將圖標旋轉 360 度，最后回到原點。

// JavaScript 代碼
document.getElementById("icon").addEventListener("click", function() {
this.classList.toggle("rotate");
});

上述 JavaScript 代碼將監聽圖標的 "click" 事件，并在點擊圖標時將其加入或移除 "rotate" 類。這樣，每次點擊圖標時，就會觸發 CSS3 動畫，實現了圖標的旋轉效果。

在實際開發過程中，我們可以根據具體需求，設置不同的 CSS 類和事件監聽，從而實現不同的點擊圖標交互效果，為頁面增添更好的用戶體驗。