💻 Transformaciones 3D Funciones de transformación en 3D

Durante los temas anteriores hemos visto diferentes funciones de transformación en el ámbito del 2D. Sin embargo, CSS también incorpora varias funciones de transformación 3D, que de la misma forma se pueden utilizar con la propiedad transform.

Transformaciones 3D

Estas funciones, en la mayoría de los casos, no son más que la incorporación del eje Z a las anteriores que ya habíamos visto, además de la adición de una función de atajo 3D para poder utilizarlas todas de una sola vez.

Antes de comenzar a verlas, recordar siempre que el eje X es el eje horizontal, el eje Y es el eje vertical y el eje Z es el eje de profundidad. Varios conceptos que se deben tener claros antes de comenzar con el 3D en CSS:

Para utilizar transformaciones 3D es necesario conocer algunas propiedades derivadas de transformaciones, como por ejemplo, las siguientes:

Propiedades	Formato	Significado
transform-style	flat | preserve-3d	Modifica el tratamiento 3D de los elementos hijos.
transform-origin		Cambia el punto de origen del elemento en una transformación.

Por defecto, la propiedad transform-style está establecida a flat, o lo que es lo mismo, trata los elementos como elementos 2D, por lo que no podemos usar 3D, salvo que lo indiquemos expresamente con el valor preserve-3d. De esta forma, todos los elementos hijos del elemento que tenga esa propiedad, se tratarán como elementos 3D:

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
</div>

<style>
.container {
  transform-style: preserve-3d;
  transform: rotateX(2deg) rotateY(2deg) rotateZ(2deg);
  perspective: 300px;
}
</style>

Observa que en este ejemplo, estamos aplicando al padre .container una propiedad transform-style: preserve-3d para dotar de 3D a los elementos hijos .element. Además, también le aplicamos una rotación en todos los ejes (para que se aprecie mejor el 3D) y una perspective (lo veremos y explicaremos en el próximo tema).

En el caso de la propiedad transform-origin, que ya explicamos en el primer tema de transformaciones, observa que simplemente hemos añadido un tercer parámetro para aplicar un punto de origen también en el eje Z. Recuerda que en el caso del eje Z, no se pueden utilizar porcentajes, sino sólo cantidades, como tamaños en píxels.

Funciones de translación 3D

Las funciones de transformación que completarían la colección de transformaciones 2D que vimos anteriormente son las siguientes:

Funciones	Significado
translateZ(z)	Traslada el elemento una distancia de z en el eje de profundidad.
translate3d(x, y, z)	Función de atajo 3D, donde podemos aplicar un a x, y y z.

Con la propiedad translateZ() podemos hacer translaciones de profundidad y con la propiedad translate3D() podemos utilizar un atajo con el que aplicar translaciones en los 3 ejes: x, y y z:

<div class="container">
  <div class="element"></div>
</div>

<style>
.container {
  width: 50px;
  height: 50px;
  transform-style: preserve-3d;
  transform: rotateX(2deg) rotateY(2deg) rotateZ(2deg);
  perspective: 300px;
}

.element {
  width: 100%;
  height: 100%;
  background: red;

  transform: translateX(40px);    /* Sólo eje X */
  transform: translateY(25px);    /* Solo eje Y */
  transform: translateZ(55px);    /* Solo eje Z */

  transform: translate3d(40px, 25px, 55px);   /* Equivale a los tres anteriores */
}
</style>

Tanto en translateX() como en translateY() se pueden utilizar valores de porcentajes, en cuyo caso, se desplazará teniendo en cuenta que 100% es el tamaño exacto correspondiente al eje del elemento.

Por ejemplo: translateX(100%) desplazaría el elemento en horizontal exactamente su tamaño de ancho, mientras que translateY(200%) desplazaría el elemento el doble de su tamaño de alto en vertical.

Ojo: Ten en cuenta que, al contrario que en x e y, el valor z de translate3d() y translateZ() no puede ser un valor de porcentaje , sino que debe ser una cantidad específica.

Funciones de rotación 3D

De la misma forma que hemos visto las funciones de translación 3D, tenemos las funciones de rotación 3D. Observa que en este caso, rotateZ() es una función que permite indicar la rotación sobre su propio eje, algo que podíamos hacer ya en el ámbito 2D.

Sin embargo, se añade la propiedad rotate3d(), que nos permite indicar la cantidad de grados que queremos realizar en cada eje, de una forma muy flexible:

Funciones	Significado
rotateZ(zdeg)	Aplica rotación 2D en zdeg grados sólo para el eje Z (profundidad).
rotate3d(x, y, z, deg)	Función de atajo, que permite aplicar una rotación a uno o varios ejes.

La función rotate3D() permite indicar un valor 0 o 1 para activar el eje correspondiente, seguido de un número de grados . Funciona de la siguiente forma:

.element {
  transform: rotate3d(1, 0, 0, 50deg);  /* Equivale a rotateX(50deg) */
  transform: rotate3d(0, 1, 0, 25deg);  /* Equivale a rotateY(25deg) */
  transform: rotate3d(0, 0, 1, 5deg);   /* Equivale a rotateZ(5deg) */

  transform: rotate3d(1, 1, 0, 100deg); /* Equivale a rotateX(100deg) rotateY(100deg) */
}

Funciones de escalado 3D

De la misma forma que las anteriores que hemos visto, las funciones de escalado también tienen su versión 3D. Las funciones que añadimos a la lista son las siguientes:

Funciones	Significado
scaleZ(fz)	Reescala el elemento a un nuevo tamaño con factor fz de profundidad.
scale3d(fx, fy, fz)	Establece un escalado 3D, donde aplica los factores a cada eje.

Al igual que en funciones anteriores, las equivalencias son las siguientes:

.element {
  transform: scaleZ(2);           /* Reescala al doble de su tamaño el eje Z */

  transform: scale3d(1, 0.5, 2);  /* Equivale a scaleX(1) scaleY(0.5) scaleZ(2) */
}

Para que el escalado de Z sea evidente, quizás sería conveniente mirar primero el tema de perspectivas.

Otras funciones

Existen algunas otras funciones de transformación menos utilizadas, como puede ser la creación de perspectivas o el uso de matrices de tranformación, mucho más potentes, pero también mucho más complejas:

Funciones	Significado
perspective(n)	Ver tema de perspectivas
matrix(n, n, ...)	Establece una matriz de transformación 2D (6 valores)
matrix3d(n, n, ...)	Establece una matriz de transformación 3D (16 valores)

Veamos un ejemplo con matrix() y otro con matrix3d():

.element {
  width: 150px;
  height: 150px;
  background: red;
  transform: matrix(1, 1, -1, 1, 75, 75);
}

En este caso, la función matrix(a, b, c, d, tx, ty) (6 parámetros) actua de la siguiente forma:

• a equivale a scaleX()
• b equivale a skewY()
• c equivale a skewX()
• d equivale a scaleY()
• tx equivale a translateX()
• ty equivale a translateY()

Por otro lado, si utilizamos matrix3d() (16 parámetros), tenemos una función de transformación mucho más compleja. Veamos un ejemplo de aplicación:

.element {
  width: 150px;
  height: 150px;
  background: red;
  transform: matrix3d(1, 0, 1, 0, 0, 1, 0.5, 0, 0, 0, 1, 0, 50, 50, 0, 1);
}

Tienes más información sobre estas funciones de matrices en el artículo Understanding the CSS Transforms Matrix de los desarrolladores del navegador Opera.

Bibliografía:

https://lenguajecss.com/css/transformaciones/transform-3d/