translate

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
是否是继承属性
Percentagesrefer to the size of bounding box
计算值as specified, but with relative lengths converted into absolute lengths
Animation typea transform
Creates stacking contextyes

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
translateChrome No support NoEdge No support NoFirefox Full support 72
Full support 72
No support 60 — 72
Disabled
Disabled From version 60 until version 72 (exclusive): this feature is behind the layout.css.individual-transform.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 60
Disabled
Full support 60
Disabled
Disabled From version 60: this feature is behind the layout.css.individual-transform.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.

参见

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