translate - CSS（层叠样式表） 编辑

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

语法

/* Keyword values */
translate: none;

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

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

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

值

单个长度/百分比值

一个长度值或百分比，表示二维平移，与声明了 X 轴和 Y 轴的平移一样（此时省略的第二个值默认为0）。等同于在 translate() 函数（2D 平移）中指定单个值。

两个长度/百分比值

两个长度值或百分比表示在二维上分别按照指定X轴和Y轴的值进行的平移。等同于在 translate() 函数（2D 平移）中函数指定两个值。

三个长度/百分比值

三个长度值或百分比，表示分别指定 X 轴、Y 轴、Z 轴的值进行三维平移。等同于translate3d() 函数（3D 平移）。

none

表示不应用平移效果。

形式语法

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

示例

HTML

<div>
  <p class="translate">Translation</p>
</div>

CSS

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 150px;
  margin: 0 auto;
}

p {
  padding: 10px 5px;
  border: 3px solid black;
  border-radius: 20px;
  width: 150px;
  font-size: 1.2rem;
  text-align: center;
}

.translate {
  transition: translate 1s;
}

div:hover .translate {
  translate: 200px 50px;
}

结果

规范

规范	状态	注释
CSS Transforms Level 2 individual transforms	Editor's Draft	Initial definition.

初始值	none
适用元素	transformable elements
是否是继承属性	否
Percentages	refer to the size of bounding box
计算值	as specified, but with relative lengths converted into absolute lengths
Animation type	a transform
Creates stacking context	yes

浏览器兼容性

BCD tables only load in the browser

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

• scale
• rotate
• transform

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