CSS中心點旋轉是一種常用到的CSS效果，它通過改變旋轉元素的transform-origin屬性值來實現。transform-origin屬性指定了旋轉變換的基準點，從而控制元素的旋轉方向和位置。

.rotate {
transform-origin: center center; /* 以元素中心點為基準點 */
}
.rotate:hover {
transform: rotate(45deg); /* 當鼠標懸浮在元素上時，將元素順時針旋轉45度 */
}

以上代碼展示了如何使用CSS來進行中心點旋轉。在.rotate類中，我們指定了transform-origin屬性值為中心點，這將使得元素以中心點為基準點進行旋轉。接著，在.rotate:hover類中，我們使用transform屬性的rotate函數來指定元素進行順時針旋轉45度。

需要注意的是，transform-origin屬性值是可調整的，你可以指定它為不同的值來改變元素的基準點。比如，如果你將transform-origin屬性值設為left top，則元素將以左上角為基準點進行旋轉。

.rotate {
transform-origin: left top; /* 以元素左上角為基準點 */
}
.rotate:hover {
transform: rotate(-45deg); /* 當鼠標懸浮在元素上時，將元素逆時針旋轉45度 */
}

以上代碼將元素的基準點設為左上角，并將元素旋轉方向改為逆時針。這樣就可以實現不同的旋轉效果了。

總之，CSS中心點旋轉是一種十分實用的CSS效果，它可以讓我們輕松地實現元素的旋轉動畫，讓網頁變得更加豐富多彩。