CSS的旋轉效果可以讓我們的頁面更加生動有趣，下面我們來學習如何用CSS使一個div在點擊后旋轉。

.rotate {
width: 200px;
height: 200px;
background-color: #008CBA;
transition: transform 1s;
}
.rotate.clicked {
transform: rotate(180deg);
}

上面的代碼中，我們首先定義了一個class為“rotate”的div，設置了它的寬高和背景顏色，并且設置了一個transition屬性，使得在類名被修改后可以有一個過渡的效果。

接著我們定義了一個class為“clicked”的div，其中將transform屬性設置為旋轉180度。我們將在JavaScript中添加或移除這個class。

const div = document.querySelector('.rotate');
div.onclick = function() {
div.classList.toggle('clicked');
}

最后，我們使用JavaScript為div添加了一個onclick事件，使得當div被點擊時，它的類名會發生變化，從而達到旋轉的效果。

以上就是使用CSS實現點擊div旋轉的方法，通過學習這個例子，我們可以更好地理解CSS的動畫效果。