transform 屬性之 transform-origin

定義

transform-origin 屬性用來設定 transform 變換的基點位置。預設情況下，基點位置為元素的中心點。 文法

transform-origin: x-axis y-axis z-axis

名稱	值	描述
x-axis	位置（left、center、right）/ 百分數 / 數值	x 軸基點座標
y-axis	位置（top、center、bottom）/ 百分數 / 數值	y 軸基點座標
z-axis	數值	Z 軸基點座標

注意：當用數值設定基點位置時，必須帶單位。 位置

使用位置設定變換基點代碼如下：

.transform-origin-position {    transform: rotate(45deg);    transform-origin: left top;}

不同位置資訊效果如下（標紅圈處為變換基點）： left-top

left-center

left-bottom

center-top

right-top

百分數

使用百分數設定變換基點代碼如下：

.transform-origin-percent {    animation: 9s rotate infinite;    transform-origin: 25% 25%;}

效果如下：

如上圖，紅圈處為元素變換基點。即代碼中設定的 x 軸和 y 軸值25%。 數值

使用數值設定變換基點代碼如下：

.transform-origin-number {    transform: rotate(45deg);    transform-origin: 100px 0;}

注意此處數值後面必須帶單位。

效果如下：

圖中紅圈處位置即為 x 軸 100px 的位置。