Atributo translate de CSS

página anterior transition-timing-function
Página siguiente unicode-bidi

Definición y uso

translate Esta propiedad permite cambiar la posición del elemento.

translate Esta propiedad define las coordenadas del eje x y y del elemento en el espacio bidimensional. También puede definir la coordenada del eje z para cambiar la posición en el espacio tridimensional.

Las coordenadas pueden proporcionar solo la coordenada del eje x, las coordenadas del eje x y y, o las coordenadas del eje x, y y del eje z.

Para entender mejor translate Para ver más atributosDemostración.

Consejo:Para que los atributos del eje z funcionen, necesita definir un valor para la propiedad CSS perspective.

Nota:Otra técnica para desplazar los elementos es usar Función translate() de CSS La propiedad CSS transform de esta página puede decirse que es un método más simple y directo para desplazar los elementos.

Ejemplo

Ejemplo 1

Cambiar la posición del elemento:

div {
  translate: 100px 20px;
}

Prueba por tu cuenta

Ejemplo 2

Al establecer el eje z translate Al establecer esta propiedad, también debe establecerse en el elemento padre perspective Para que podamos ver algún efecto, debemos establecer esta propiedad:

DIV1 {
  perspective: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

Prueba por tu cuenta

Sintaxis CSS

translate: eje-x eje-y eje-z|initial|inherit;

Valor de la propiedad

Valor	Descripción
eje-x	Define la posición en el eje x. Valores posibles: Longitud Porcentaje
eje-y	Define la posición en el eje y. Valores posibles: Longitud Porcentaje
eje-z	Define la posición en el eje z. Valores posibles: Longitud Porcentaje
initial	Establezca esta propiedad en su valor predeterminado. Ver: initial.
inherit	Hereda esta propiedad del elemento padre. Ver: inherit.

Detalles técnicos

Valor predeterminado:	none
Herencia:	No
Producción de animación:	Admite. Consulte:Propiedades relacionadas con la animación.
Versión:	CSS3
Sintaxis JavaScript:	object.style.translate="10px 20px"