translate

Baseline 2022

Newly available

Since August 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

尝试一下

语法

css
/* 关键字值 */
translate: none;

/* 单个值 */
translate: 100px;
translate: 50%;

/* 两个值 */
translate: 100px 200px;
translate: 50% 105px;

/* 三个值 */
translate: 50% 105px 5rem;

/* 全局值 */
translate: inherit;
translate: initial;
translate: revert;
translate: revert-layer;
translate: unset;

单个 <length-percentage>

一个 <length><percentage>,指沿 X 轴平移。等同于在 translate() 函数(2D 平移)中指定单个值。

两个 <length-percentage>

两个 <length><percentage> 表示在二维上分别按照指定 X 轴和 Y 轴的值进行的平移。等同于在 translate() 函数(2D 平移)中函数指定两个值。

三个值

两个 <length-percentage> 和单个的 <length> 分别指定 X 轴、Y 轴、Z 轴的值进行三维平移。等同于 translate3d() 函数(3D 平移)。

none

表示不应用平移效果。

形式定义

初始值none
适用元素可变换元素
是否是继承属性
Percentagesrefer to the size of bounding box
计算值as specified, but with relative lengths converted into absolute lengths
动画类型a transform
Creates stacking context

形式语法

translate = 
none |
<length-percentage> [ <length-percentage> <length>? ]?

<length-percentage> =
<length> |
<percentage>

示例

悬停时平移元素

此示例显示如何使用 translate 属性在 X、Y、Z 三个轴上移动元素。第一个盒子沿 X 轴移动,第二个沿 X、Y 轴方向,第三个盒子沿着 X、Y、Z 轴,并且由于向父元素添加了 perspective,看起来是向着观察者移动。

HTML

html
<div class="wrapper">
  <div id="box1">沿 X 轴平移</div>
  <div id="box2">沿 X、Y 轴平移</div>
  <div id="box3">沿 X、Y、Z 轴平移</div>
</div>

CSS

css
.wrapper {
  perspective: 100px;
  display: inline-flex;
  gap: 1em;
}
.wrapper > div {
  width: 9em;
  line-height: 8em;
  text-align: center;
  transition: 0.5s ease-in-out;
  border: 3px dotted;
}
#box1:hover {
  translate: 20px;
}

#box2:hover {
  translate: 20px 20px;
}

#box3:hover {
  translate: 5px 5px 30px;
}

结果

规范

Specification
CSS Transforms Module Level 2
# individual-transforms

浏览器兼容性

BCD tables only load in the browser

参见

注意:skew 不是一个独立的变换属性。