translate

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2022.

A propriedade translate CSS do CSS, permite que você especifique transformações translate individualmente e independentemente da propriedade transform. É mais adequado para o uso de interface de usuário, e nos poupa quando se trata de lembrar a ordem exata que devemos especificar nos valores das funções de transform.

Syntax

css
/* Propriedades principais */
translate: none;

/* Valores únicos */
translate: 100px;
translate: 50%;

/* Dois valores */
translate: 100px 200px;
translate: 50% 105px;

/* Três valores */
translate: 50% 105px 5rem;

/* Valores Globais */
translate: inherit;
translate: initial;
translate: revert;
translate: revert-layer;
translate: unset;

Valores

Único <length-percentage> valor

Um <length> ou <percentage> que especifica o deslocamento translate ao longo do eixo-X. Equivalente a função translate() (2D translation) com um único valor especificado.

Dois <length-percentage> valores

Dois <length> ou <percentage> que especifica os deslocametos translate ao longo dos eixos X e Y (respectivamente) de uma 2D translation. Equivalente a função translate() (2D translation) com dois valores especificados.

Três valores

Dois <length-percentage> e um único <length> valores que especifica os deslocamentos dos eixos X, Y, e Z (respectivamente) de uma 3D translation. Equivalente a função translate3d() (3D translation).

none

Especifica que nenhum deslocamento deva ser aplicado.

Definição formal

Initial valuenone
Aplica-se aqualquer elemento transformavel
Inheritednão
Percentagesrefer to the size of bounding box
Computed valueas specified, but with relative lengths converted into absolute lengths
Animation typea transform
Creates stacking contextyes

Sintaxe formal

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

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

Exemplos

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

Resultado

Especificações

Specification
CSS Transforms Module Level 2
# individual-transforms

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
translate
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Veja também

Nota: skew não é um valor independente de transform