CSS transform-origin 屬性
定義和用法
transform-origin 屬性允許你更改變換元素的位置。
2D 變換可以改變元素的 x 軸和 y 軸。3D 變換還可以改變元素的 z 軸。
為了更好地理解 transform-origin 屬性，請 檢視演示。
注意：此屬性必須與 transform 屬性一起使用。
提示：為了更好地理解此屬性在3D 變換中的應用，請 檢視演示。
| 預設值 | 50% 50% 0 |
|---|---|
| 繼承 | no |
| 可動畫 | 是的。 閱讀有關可動畫屬性 Try it |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.transformOrigin="0 0" Try it |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| transform-origin | 36 | 12 | 16 | 9 | 23 |
CSS 語法
transform-origin: x-軸 y-軸 z-軸|initial|inherit;
屬性值
| 屬性值 | 描述 |
|---|---|
| x-axis | 定義檢視在 x 軸上的放置位置。可能的值
|
| y-axis | 定義檢視在 y 軸上的放置位置。可能的值
|
| z 軸 | 定義檢視在 z 軸上的放置位置（用於 3D 變換）。可能的值
|
| initial | 將此屬性設定為其預設值。閱讀關於initial |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
相關頁面
CSS 教程： CSS 2D 變換
CSS 教程： CSS 3D 變換
HTML DOM 參考：transformOrigin 屬性
