translateZ()

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.

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  鈩2 Coordenadas Hom贸geneas en 鈩濃剻2 Coordenadas Cartesianas en 鈩3 Coordenadas Hom贸geneas en鈩濃剻3
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 鈩3 y no puede ser representada usando una matriz de coordenadas-Cartesianas.

0

t

 1

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

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

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

Especificaci贸n Estado Comentario
CSS Transforms Level 2
La definici贸n de 'transform' en esta especificaci贸n.
Editor's Draft Agrega funciones de transformaci贸n 3D al CSS Transform est谩ndar.

Compatibilidad con navegador

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

V茅ase tambi茅n