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 属性
