CSS3 箭頭旋轉是一種非常實用的技術，可以輕松實現箭頭的旋轉效果，讓頁面更加動態和生動。

.arrow {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #005CAF;
cursor: pointer;
transition: transform 0.2s ease-in-out;
}
.arrow:hover {
transform: rotate(90deg);
}

上面的代碼實現了一個簡單的箭頭效果，當鼠標懸停在箭頭上時，箭頭會以順時針方向旋轉90度。首先，我們定義了一個 .arrow 類，它通過設置 border 屬性實現了箭頭的樣式，同時設置了 transition 屬性控制旋轉效果的過渡時間和緩動函數。

然后，我們為 .arrow:hover 類設置了 transform 屬性，它使用 rotate() 函數來實現旋轉效果。由于我們希望箭頭沿著順時針方向旋轉90度，所以傳入了角度值 90deg。

需要注意的是，我們必須將 hover 偽類放在 .arrow 類之后，這樣樣式才會按照正確的順序應用。另外，transform 屬性可以同時實現旋轉、縮放、移動等效果，使用時需要根據實際需求來調整參數。

在實際開發中，CSS3 箭頭旋轉可以應用在各種場景下，比如滾動菜單、下拉框、指示器等。它不僅方便易用，而且可以大大提高頁面的交互性和可讀性，值得我們深入學習和應用。