Skip to main content

平移函数 translate

Docs
  • 平移：translate(x, y)
    • 这个 CSS 函数用于移动元素在平面上的位置。
    • translate 本身可以表示翻译的意思，在物理上也可以表示平移；
  • 值个数
    • 一个值时，设置 x 轴上的位移
    • 二个值时，设置 x 轴和 y 轴上的位移
  • 值类型：
    • 数字：100px
    • 百分比：参照元素本身（refer to the size of bounding box）
  • translate 是 translateX 和 translateY 函数的简写。
  • translate 的百分比可以完成一个元素的水平和垂直居中：
  • translate 函数相对于 flex 布局的兼容性会好一点点(目前 flex 布局已经非常普及，直接使用 flex 布局即可；)

CSS 属性 translate 允许你单独声明平移变换，并独立于 transform 属性。这在一些典型的用户界面上更好用，而且这样就无需在 transform 中声明该函数并记住转换函数的确切顺序了。

注意

CSS translate 函数不会改变元素的布局或占用空间大小，它只会将元素视觉上移动到新的位置。如果您想要改变元素的实际位置，使用 position 属性或 flex 布局等方法会更适合。

取值​

/* Single <length-percentage> values */
transform: translate(200px);
transform: translate(50%);

/* Double <length-percentage> values */
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);

语法​

translate() = translate( <length-percentage> , <length-percentage>? )
translateX() = translateX( <length-percentage> )
translateY() = translateY( <length-percentage> )

<length-percentage>：定义元素移动的距离。可以是正值（向右/下移动）或负值（向左/上移动）。如果省略此参数，则默认为 0。

Details
Details