translate

CSS 属性 translate 允许你单独声明平移变换，并独立于 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;

值

单个长度/百分比值: 一个长度值或百分比，表示二维平移，与声明了 X 轴和 Y 轴的平移一样（此时省略的第二个值默认为 0）。等同于在 translate() 函数（2D 平移）中指定单个值。
两个长度/百分比值: 两个长度值或百分比表示在二维上分别按照指定 X 轴和 Y 轴的值进行的平移。等同于在 translate() 函数（2D 平移）中函数指定两个值。
三个长度/百分比值: 三个长度值或百分比，表示分别指定 X 轴、Y 轴、Z 轴的值进行三维平移。等同于translate3d() 函数（3D 平移）。
none: 表示不应用平移效果。

形式语法

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

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

示例

HTML

html

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

CSS

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;
}

结果

规范

Specification
CSS Transforms Module Level 2 # individual-transforms

初始值	`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

参见

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