This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The translate
CSS property allows you to specify translation transforms individually and independantly of the transform
property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform
value.
/* Keyword values */ translate: none; /* Single values */ translate: 100px; translate: 50%; /* Two values */ translate: 100px 200px; translate: 50% 105px; /* Three values */ translate: 50% 105px 5rem;
translate()
(2D translation) function with a single value specified.translate()
(2D translation) function with two values specified.translate3d()
(3D translation) function.none
none | <length-percentage> [ <length-percentage> <length>? ]?where
<length-percentage> = <length> | <percentage>
<div> <p class="translate">Translation</p> </div>
* { 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 | Status | Comment |
---|---|---|
CSS Transforms Level 2 The definition of 'individual transforms' in that specification. | Editor's Draft | Initial definition. |
Initial value | none |
---|---|
Applies to | transformable elements |
Inherited | no |
Percentages | refer to the size of bounding box |
Media | visual |
Computed value | as specified, but with relative lengths converted into absolute lengths |
Animation type | a transform |
Canonical order | per grammar |
Creates stacking context | yes |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | Yes | No | 60
|
No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | Yes | No | 60
|
No | No | Yes |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/translate