Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

La function CSS translate3d() mueve la posicion del elemento en el espacio 3D. Esta transformacion es caracterizada por un vector de 3 dimensiones cuyas coordenadas definen que tanto se mueve en cada dirección.

Sintaxis

translate3d(tx, ty, tz)

Valores

tx
Es un <length> que representa la abscisa del vector de traslación.
ty
Es un <length> que representa la ordenada del vector de traslación.
tz
Es un <length> que representa el componente z del vector de traslación. Puede ser un <percentage> valor; en ese caso la propiedad que contiene la transformación se considera inválida.
Coordenadas Cartesianas en ℝ2 Corrdenadas Homogéneas en ℝℙ2 Coordenadas Cartesianas en ℝ3 Coordenadas Homogéneas en ℝℙ3

Esta transformación se aplica al espacio 3D y no puede representarse en el plano.

Una traslación no es una transformación lineal en ℝ3 y no puede ser representada utilizando una matriz en el sistema de coordenadas Cartesianas.

1  0  0  tx
0  1  0  ty
0  0  1  tz
0  0  0  1

Ejemplos

Uso de una traslación de eje único

HTML

<p>foo</p>
<p class="transformed">bar</p>
<p>foo</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: perspective(500px) translate3d(10px,0px,0px);
  /* equivalente a perspective(500px) translateX(10px)*/
  background-color: blue;
}

Resultado

Combinando traslación de eje z y eje x

HTML

<p>foo</p>
<p class="transformed">bar</p>
<p>foo</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: perspective(500px) translate3d(10px,0px,100px);
  background-color: blue;
}

Resultado

Etiquetas y colaboradores del documento

 Colaboradores en esta página: luchopintado
 Última actualización por: luchopintado,