Recomendaciones de curso:

Página anterior Función log() de CSS
Página siguiente Función matrix3d() de CSS
Volver a la capa superior Manual de funciones CSS

Función matrix() de CSS

Definición y uso de CSS matrix() La función define una transformación bidimensional mediante una matriz que contiene seis valores.

matrix() La función acepta seis parámetros que permiten realizar operaciones de rotación, escalado, desplazamiento e inclinación en el elemento.

Los parámetros son: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).

Ejemplo

Ejemplo 1

Uso matrix() Definir transformaciones bidimensionales para varios elementos <div>:

#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#myDiv3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

Prueba tú mismo

Ejemplo 2

Uso matrix() Crear transformaciones bidimensionales para las imágenes:

#img1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#img2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#img3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

Prueba tú mismo

Sintaxis CSS

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Valor	Descripción
scaleX()	Obligatorio. Número, utilizado para escalar el ancho del elemento.
skewY()	Obligatorio. Número (ángulo), utilizado para realizar una transformación de inclinación a lo largo del eje Y.
skewX()	Obligatorio. Número (ángulo), utilizado para realizar una transformación de inclinación a lo largo del eje X.
scaleY()	Obligatorio. Número, utilizado para escalar la altura del elemento.
translateX()	Obligatorio. Número, utilizado para mover el elemento a lo largo del eje X.
translateY()	Obligatorio. Número, utilizado para mover el elemento a lo largo del eje Y.