CSS動畫是現代Web設計中必不可少的一部分。其中，圓形旋轉是一種非常實用的動畫效果。通過應用CSS的transform屬性，我們可以用CSS輕松地實現這個動畫效果。同時，要讓這個動畫以中心軸為基準進行旋轉，我們還需要使用一些CSS的技巧和技術。

.circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #00bfff;
position: relative;
animation: rotate 3s infinite linear;
transform-origin: center;
}
@keyframes rotate{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}

上面的代碼塊我們定義了一個名為.circle的類，表示我們要為一個圓形元素添加旋轉動畫。我們首先將寬度和高度都設為100像素，然后使用border-radius屬性將元素的外形變成一個圓形。我們還設置了背景色和位置屬性，以及動畫的持續時間和循環方式。

最重要的是我們使用了transform-origin屬性來指定旋轉的中心軸，這里我們選擇了元素的中心點。這樣，無論圓形元素在頁面上的位置如何變化，它都會始終繞著這個中心進行旋轉。

我們還通過@keyframes規則來定義了動畫的實現方式。在這里，我們將動畫從0度轉到360度，即一圈完整的旋轉。同時，我們將動畫的持續時間設置為3秒，并使其無限循環進行。

最后，在頁面中應用這個類時，只需要在對應的HTML元素上添加.circle類即可實現這個漂亮的圓形旋轉動畫。