CSS3旋轉改變原點的方法

在CSS3中，我們可以通過設置transform-origin屬性來改變旋轉的原點，默認情況下，旋轉的原點是元素的中心，但我們可以將其更改為元素的任何位置。

如果我們有一個元素，其寬度為200px，高度為100px，我們可以將其旋轉原點設置為元素的左上角，即(0, 0)，這樣，當我們對元素進行旋轉時，它將圍繞其左上角進行旋轉。

以下是一個示例代碼：

.rotate-example {
  width: 200px;
  height: 100px;
  transform-origin: 0 0; /* 設置旋轉原點為元素的左上角 */
  transform: rotate(45deg); /* 旋轉45度 */
}

在上面的代碼中，transform-origin屬性將旋轉原點設置為元素的左上角，然后通過transform屬性將元素旋轉45度。

如果我們想要將旋轉原點設置為元素的右下角，我們可以將transform-origin屬性設置為100% 100%，這樣，元素將圍繞其右下角進行旋轉。

希望這篇文章能幫助你更好地理解和使用CSS3中的旋轉功能。