DevShelf

Appearance

translate ​

描述 ​

translate CSS 属性允许您独立于 transform 属性单独指定平移转换。这可以更好地映射到典型的用户界面用法，并且无需记住在 transform 值中指定的转换函数的确切顺序。

效果展示 ​

语法 ​

css
/* Keyword values */
translate: none;

/* Single values */
translate: 100px;
translate: 50%;

/* Two values */
translate: 100px 200px;
translate: 50% 105px;

/* Three values */
translate: 50% 105px 5rem;

值 ​

  • Single values <length> 或 <percentage> 指定沿 X 轴的平移。相当于指定单个值的 translate() （2D 转换）函数。
  • Two values 两个 <length> 或 <percentage> 分别指定 2D 平移的 X 轴平移值和 Y 轴平移值。相当于指定了两个值的 translate() （2D 转换）函数。
  • Three values 两个 <length-percentage> 和单个 <length> 值，分别指定 3D 平移的 X、Y 和 Z 轴平移值。相当于 translate3d() （3D 转换）功能。