CSS中的旋轉是一個強大的工具，它可以將元素圍繞一個中心軸旋轉，使頁面更加生動。在進行旋轉之前，需要指定旋轉中心軸的位置。

transform-origin: x-axis y-axis;

transform-origin屬性用于指定旋轉中心軸的位置。x-axis和y-axis是可選值，可取以下任意一個：

• left
• right
• center
• top
• bottom
• length
• percentage

當x-axis指定為left、right、center時，表示在元素的左邊、右邊或中間作為旋轉中心軸。

/* 水平旋轉、以中心軸向右移動30px */
transform: rotate(30deg);
transform-origin: center right 30px;

當y-axis指定為top、bottom、center時，表示在元素的上邊、下邊或中間作為旋轉中心軸。

/* 垂直旋轉、以中心軸向下移動20% */
transform: rotateX(45deg);
transform-origin: center top 20%;

當x-axis和y-axis同時指定時，表示以指定的x和y坐標為中心軸。

/* 旋轉、以10%、20%為中心軸 */
transform: rotateZ(-45deg);
transform-origin: 10% 20%;

通過指定旋轉中心軸，我們可以使元素繞不同的軸進行旋轉，從而實現更加豐富多彩的效果。