CSS3是一種用于創造網頁樣式的語言，它讓我們能夠更輕松地進行頁面布局和美化。其中一個非常有用的功能就是旋轉。通過旋轉一個元素，我們可以讓它在屏幕上呈現出更加動態和生動的效果。 然而，有時候我們會發現元素在旋轉時不是以我們預期的點為中心進行旋轉，這時候我們就需要知道如何更改旋轉點。 在CSS中，旋轉點也稱為“變換點”。旋轉點的位置可以使用transform-origin屬性來進行控制。默認情況下，旋轉點的位置位于元素的中心點。如果希望更改旋轉點，我們可以使用transform-origin屬性來指定旋轉點的位置。 下面是一個例子，讓我們來更改一個元素的旋轉點： ```html

這是一個旋轉的正方形。

.square {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(30deg);
transform-origin: 50% 50%;
}

``` 在上述代碼中，我們首先定義了一個正方形元素，并且給它一個紅色的背景色。然后，我們使用transform屬性來對這個元素進行旋轉，旋轉角度為30度。這個旋轉會默認以元素的中心點為旋轉點，但是我們希望把旋轉點改成元素的左上角，因此我們使用了transform-origin屬性來指定旋轉點的位置。 transform-origin屬性接受兩個參數，分別表示旋轉點的橫坐標位置和縱坐標位置。在上述例子中，我們使用50% 50%來指定旋轉點在元素的中心點，如果我們把這兩個參數改成0% 0%，那么旋轉點就會變成元素的左上角。 總結一下，使用transform-origin屬性可以輕松地更改元素的旋轉點。我們只需要指定旋轉點的橫坐標和縱坐標位置即可。這樣，我們就可以讓元素在旋轉時呈現出更加自然和流暢的效果。