在CSS中，旋轉動畫可以讓元素在頁面上呈現出流暢的旋轉效果。但是，在使用旋轉動畫時，有時候你會發現元素并不會按照你想要的位置旋轉。這通常是因為旋轉動畫的中心點不正確。本文將為大家介紹如何設置旋轉動畫的中心點。

.rotate {
transform-origin: 50% 50%;    /* 默認值 */
}

如上所示，我們可以通過transform-origin屬性來設置元素的旋轉中心點。該屬性接受兩個值，分別代表X軸和Y軸的百分比。默認值為50% 50%。這意味著元素的旋轉中心將會位于元素的中央位置。如果您希望將旋轉中心點移動到任意位置，只需更改transform-origin屬性的值即可。

.rotate {
transform-origin: top left;
}

如上所示，我們可以將transform-origin設置為“top left”。這將使元素的旋轉中心點位于元素的左上角。這些值可以是其他CSS單位，例如像素或以“em”為單位的值，甚至可以是組合值“50% top”。只需確保您提供的值是有效的CSS位置屬性，您的旋轉中心就可以設置為任何您想要的位置。

通過正確使用transform-origin屬性，您可以輕松控制元素的旋轉中心，從而實現完美的旋轉動畫。