指南針旋轉是CSS3中的一個非常有趣的動畫效果，可以為網頁增添不少互動性和趣味性。下面我們來介紹一下如何使用CSS3實現指南針旋轉效果。

.arrow{
width: 50px;
height: 50px;
border: 10px solid #666;
border-radius: 50%;
transform: rotate(0deg);
transition: all 1s linear;
}
.arrow:hover{
transform: rotate(360deg);
}

首先，我們先給指南針一個樣式，這里我們采用一個圓形的樣式，大小為50px，邊框為10px，顏色為#666。同時，我們將指南針的初始旋轉角度設置為0度，采用CSS3中的transform屬性來實現。

接著，我們為指南針設置一個:hover偽類，當鼠標懸浮在指南針上時，觸發旋轉效果。這里我們將旋轉角度設置為360度，同時設置旋轉時間為1秒，采用CSS3中的transition屬性來實現。

最終效果如下：