los translate3d() CSS La función reposiciona un elemento en el espacio 3D. Su resultado es un <transform-function> tipo de datos.

Esta transformación se caracteriza por un vector tridimensional. Sus coordenadas definen cuánto se mueve el elemento en cada dirección.

Sintaxis

translate3d(tx, ty, tz)

Valores

tx
Es un <length> o <percentage> que representa la abscisa del vector de traducción.
ty
Es un <length> o <percentage> que representa la ordenada del vector de traducción.
tz
Es un <length> que representa el componente z del vector de traducción. No puede ser un <percentage> valor; en ese caso, la propiedad que contiene la transformación se considera inválida.
Coordenadas cartesianas en ℝ2 Coordenadas homogéneas en ℝℙ2 Coordenadas cartesianas en ℝ3 Coordenadas homogéneas en ℝℙ3

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

 Una traslación no es una transformación lineal en ℝ3 y no se puede representar mediante una matriz de coordenadas cartesianas. 1 0 0 tx 0 1 0 ty 0 0 1 tz 0 0 0 1

Ejemplos de

Usando una traslación de un solo eje

HTML

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

CSS

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /* Equivalent to perspective(500px) translateX(10px) */
  transform: perspective(500px) translate3d(10px, 0, 0px);
  background-color: pink;
}

Resultado

Combinando la traslación del eje zy el eje x

HTML

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

CSS

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

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

Resultado

Especificaciones

Especificación Estado Comentario
CSS transforma el nivel 2
La definición de ‘translate3d ()’ en esa especificación.		 Borrador del editor Definición inicial

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
translate3d() 1 12

3,5
[“Firefox 14 removed experimental support for skew(), but it was reintroduced in Firefox 15.”, “Before Firefox 16, the translation values of matrix() and matrix3d() could be <length>s, in addition to the standard <number>.”]

9 Internet Explorer 9 admite transformaciones 2D pero no 3D. En la versión 9, la combinación de funciones de transformación 2D y 3D invalida toda la propiedad.

10,5 3.1 2 18 4 11 3.2 1.0
3d 12 12 10 10 15 4 3 18 10 14 3.2 1.0

Ver también

  • transform
  • <transform-function>