CSS translate 屬性
定義和用法
translate
屬性允許您改變元素的位置。
translate
屬性在 2D 中定義元素的 x 和 y 座標。您也可以定義 z 座標來改變 3D 中的位置。
座標可以只給出 x 座標、x 和 y 座標,或者 x、y 和 z 座標。
為了更好地理解 translate
屬性,請 檢視演示。
提示:您需要為 CSS perspective
屬性定義一個值,z 屬性才能生效。
注意:轉換元素的另一種技術是使用 CSS transform
屬性和 CSS translate()
函式。正如本網頁所解釋的,CSS translate
屬性是轉換元素的更簡單、更直接的方法。
預設值 | none |
---|---|
繼承 | no |
可動畫 | 是的。 閱讀有關可動畫屬性的內容 嘗試一下 |
版本 | CSS3 |
JavaScript 語法 | object.style.translate="10px 20px" 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
屬性 | |||||
---|---|---|---|---|---|
翻譯 | 104 | 104 | 72 | 14.1 | 90 |
CSS 語法
translate: x軸 y軸 z軸|initial|inherit;
屬性值
屬性值 | 描述 | 演示 |
---|---|---|
x-axis | 定義 x 軸上的位置。可能的值
|
演示 ❯ |
y-axis | 定義 y 軸上的位置。可能的值
|
演示 ❯ |
z 軸 | 定義 z 軸上的位置。可能的值
|
演示 ❯ |
initial | 將此屬性設定為其預設值。閱讀關於initial | |
inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
當設定了 z 軸的 translate
屬性時,必須在父元素上設定 perspective
屬性,我們才能看到任何效果。
DIV1 {
perspective: 200px;
}
DIV2 {
translate: 50px 50px 50px;
}
自己動手試一試 »
相關頁面
CSS 教程: CSS 2D 變換
CSS 教程: CSS 3D 變換
CSS scale 屬性: CSS Scale 屬性
CSS rotate 屬性: CSS Rotate 屬性
CSS perspective 屬性: CSS Perspective 屬性