CSS: Matrices

Las matrices son un concepto matemático usado para representar transformaciones en dos dimensiones (2D) y tres dimensiones (3D). En CSS se utilizan para definir transformaciones arbitrarias que se aplican a los elementos HTML, como sería un cambio de posición, rotación, escalado o inclinación.

Para crear matrices de transformación, CSS provee un par de funciones que se usan de forma específica para el 2D y el 3D. Son las siguientes:

La función ‘matrix()’

La función matrix() permite definir una matriz de transformación bidimensional (2D), y debe usarse dentro de la propiedad CSS transform. Se trata de una potente función que permite realizar transformaciones complejas, combinando la traslación, la rotación, el escalado y la deformación en una sola, lo que proporciona un mayor control sobre la forma en que se aplican las transformaciones.

Esta función admite 6 parámetros que serán valores numéricos. Cada uno de estos parámetros representa un tipo de transformación en dos dimensiones (2D). Podemos definir los 6 parámetros con las siguientes variables:

.matriz {
  transform: matrix(a, b, c, d, tx, ty)
}

A continuación se detallan los parámetros:

El uso de todos estos parámetros define la transformación que se aplicará en la matriz 2D, por lo que debe mantenerse el orden indicado. Dicho de otro modo, los 6 parámetros representan las siguientes funciones:

.matriz {
  transform: matrix(
    scaleX(),
    skewY(),
    skewX(),
    scaleY(),
    translateX(),
    translateY(),
  )
}

Los valores por defecto son los siguientes:

.matriz {
  transform: matrix(1, 0, 0, 1, 0, 0);
}

En los valores de translación, por defecto se interpretará que son píxeles. En caso de querer usar otras unidades de longitud, será necesario indicarlas.

Cabe señalar que la función matrix() trabaja sobre una matriz de 3×3, aunque solo admita 6 parámetros. Esto es debido al eje de la profundidad (Z), que usa los valores por defecto. Se puede distribuir la matriz de 3×3 de esta forma:

Tal y como se puede deducir, en esta matriz de 3×3, los 3 valores de la primera fila corresponden al eje horizontal (X), los de la segunda fila corresponden al eje vertical (Y) y los de la tercera fila corresponden al eje de la profundidad (Z).

Vamos a ver un ejemplo con una matriz de transformación en 2D. Para ello, creamos un contenedor cuadrado de color naranja y en su interior le colocamos otro cuadrado, pero de color turquesa, al que aplicamos la matriz.

Código CSS:

.contenedor {
  background: #ff7f2aaa;
  border: 1px solid #ff7f2a;
  display: inline-block;
  height: 40px;
  width: 40px;
}

.contenido {
  background: teal;
  height: 40px;
  width: 40px;
}

.matriz {
  transform: matrix(1.2, 0, -0.5, 0.8, 20, 0);
}

Resultado:

A

R

En el caso de la izquierda, no se aplica la matriz de transformación. En el caso de la derecha, se ha indicado un escalado de 1.2 en el eje horizontal y de 0.8 en el eje vertical. También se ha aplicado una deformación en X de 0.8. Finalmente, se ha aplicado una traslación de 20 píxeles hacia la derecha (eje X).

La función ‘matrix3d()’

La función matrix3d() permite definir una matriz de transformación tridimensional (3D), y se usa como valor de la propiedad CSS transform. Es muy útil porque ofrece un control con mayor precisión sobre las transformaciones, pero en este caso permite combinar múltiples transformaciones tridimensionales (3D).

Esta función admite 16 parámetros que controlan diferentes aspectos de la transformación tridimensional, entre los que se incluye la rotación, el escalado, la traslación y la perspectiva. Estos 16 parámetros se distribuyen en 4 filas de 4 columnas; dando como resultado una matriz de 4×4. Podemos definir los 16 parámetros con las siguientes variables:

.esquema3d {
  transform: matrix3d(
    a1, b1, c1, d1,
    a2, b2, c2, d2,
    a3, b3, c3, d3,
    a4, b4, c4, d4)
}

Los parámetros de la primera columna (a1, a2, a3 y a4) son para al eje horizontal (X); los de la segunda (b1, b2, b3 y b4) son para al eje vertical (Y); los de la tercera (c1, c2, c3 y c4) son para la profundidad (Z); y los de la cuarta (d1, d2, d3 y d4) corresponden a la traslación.

A continuación se detallan los parámetros que se relacionan con las habituales funciones de transformación:

El resto de los parámetros, como a3, b3, c1 y c2 tienen que ver con un estiramiento (transformación de corte); mientras que d1, d2, d3 y d4 tienen que ver con la perspectiva y el control de la proyección.

Los valores por defecto son los siguientes:

.por-defecto {
  transform: matrix3d(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1)
}

Vamos a ver un ejemplo con una matriz de transformación en 3D. Reutilizamos el contenedor cuadrado y le añadimos un elemento hijo de color turquesa, al que aplicamos la matriz tridimensional (3D):

Código CSS:

.matriz3d {
  transform: matrix3d(
    1.1,  0.1, 0, -0.005,
    -0.2, 0.7, 0, 0.009,
    0,    0,   1, 0,
    8,    1,   0, 1);
}

Resultado:

A

R

En la figura de la derecha se ha aplicado una matriz tridimensional que ha deformado el elemento, pasando de ser un cuadrado como en el caso de la izquierda a ser un polígono irregular de cuatro lados.