translate

Baseline 2022

Newly available

Since August 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

BCD tables only load in the browser

Veja também

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