translateZ()

Baseline Widely available

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

La función translateZ() CSS reposiciona un elemento a lo largo del eje-z (z-axis) en el espacio 3D, es decir, más cerca o mas lejos del espectador. Su resultado es un <transform-function> tipo de dato.

Pruébalo

Esta transformación es definida por una <length> la cual especifica que tan lejos hacia denttro o hacia afuera el elemento o los elementos se mueven.

En los ejemplos interacticos anteriores, perspective: 550px; (para crear un espacio 3D) y transform-style: preserve-3d; (los elementos hijos, los 6 lados del cubo, estan también posicionados en el espacio 3D), es decir, han sido establecidos en el cubo.

Nota: translateZ(tz) es equivalente a translate3d(0, 0, tz).

Syntax

translateZ(tz)

Values

tz: Una <length> que representa el componente-z del vector. Un valor positivo mueve el elemento hacia el espectador, y un elemento negativo mueve el elemento más lejos.

Coordenadas Cartesianas en ℝ²	Coordenadas Homógeneas en ℝℙ²	Coordenadas Cartesianas en ℝ³	Coordenadas Homógeneas enℝℙ³
Esta transformación se aplica al espacio 4D y no puede ser representada en el plano.	Una traducción no es una transformación lineal en ℝ³ y no puede ser representada usando una matriz de coordenadas-Cartesianas.	$(\begin{matrix} 1 & 0 & 0 & 0 \end{matrix})$ $(\begin{matrix} 0 \end{matrix})$ $(\begin{matrix} 1 & 0 & 0 \end{matrix})$ $(\begin{matrix} \end{matrix})$ 0 0 1 t $(\begin{matrix} 0 & 0 & 0 & 1 \end{matrix})$

Coordenadas Cartesianas en ℝ²

Coordenadas Homógeneas en ℝℙ²

Coordenadas Cartesianas en ℝ³

Coordenadas Homógeneas enℝℙ³

Esta transformación se aplica al espacio 4D y no puede ser representada en el plano.

Una traducción no es una transformación lineal en ℝ³ y no puede ser representada usando una matriz de coordenadas-Cartesianas.

$(\begin{matrix} 1 & 0 & 0 & 0 \end{matrix})$

$(\begin{matrix} 0 \end{matrix})$ $(\begin{matrix} 1 & 0 & 0 \end{matrix})$

$(\begin{matrix} \end{matrix})$ 0 0 1 t

$(\begin{matrix} 0 & 0 & 0 & 1 \end{matrix})$

Ejemplos

En este ejemplo, se crean dos cuadros. Uno se coloca normalmente en la página, sin ser traducida en absoluto. El segundo se modifica aplicando perspectiva para crear un espacio 3D, luego se mueve hacia el usuario.

HTML

html

<div>Static</div>
<div class="moved">Moved</div>

CSS

css

div {
  position: relative;
  width: 60px;
  height: 60px;
  left: 100px;
  background-color: skyblue;
}

.moved {
  transform: perspective(500px) translateZ(200px);
  background-color: pink;
}

Lo que realmente importa es la clase "movida"; veamos que hace. Primero, la función perspective() posiciona al espectador en relación con el plano que se encuentra donde z=0 (en esencia, la superficie de la pantalla). Un valor de 500px significa que el usario es 500 pixels "delante de" las imagenes ubicadas en z=0.

Luego, la función translateZ() mueve el elemento 200 pixeles "hacia afuera" desde la pantalla, hacia el usuario. Esto tiene el efecto de hacer que el elemento parezca más grande cuando se ve en una pantalla 2D, o más cerca cuando se ve usando un auricular VR u otro dispositivo de pantalla 3D.

Resultado

Si el valor perspective() es menor que el valor translateZ(), como transform: perspective(200px) translateZ(300px); el elemento transformado no será visible ya que está más allá de la vista del usuario. Cuanto menor sea la diferencia entre la pespectiva y los valores de transformación, más cerca estará el usuario del elemento y más grande parecerá el elemento traducido.

Especificaciones

Specification
CSS Transforms Module Level 2 # funcdef-translatez

Compatibilidad con navegador

Por favor observe la propiedad <transform-function> para información de compatibilidad.