Transformaciones 2D: transformaciones en forma simultanea con matrix

La función CSS define una matriz de transformación 2D homogénea toma seis parámetros, que contienen funciones matemáticas, lo que le permite rotar, escalar, mover (traducir) y sesgar elementos.

La función matrix() se especifica con seis valores. Los valores constantes están implícitos y no se pasan como parámetros; los otros parámetros se describen en el orden de la columna principal. Matrix() combina todos los métodos de transformación 2D en uno.

El método matrix () toma seis parámetros, que contienen funciones matemáticas, lo que le permite rotar, escalar, mover (traducir) y sesgar elementos.

Los parámetros son los siguientes:

 matrix (scaleX (), skewY (), skewX (), scaleY (), translateX (), translateY ())
La matriz de transformación "unidad"

Una matriz de transformación que no cambia la forma, el tamaño o la posición de ninguna manera se escribiría como:

transform: matrix(1, 0, 0, 1, 0, 0)
Los números de las posiciones scaleX y scaleY posiciones son ambos 1 (que no están cambiando el tamaño), y skewY y skewX son 0 (no estamos sesgar el objeto en absoluto), y finalmente, translateX y translateY son 0, así que no estamos moviendo el cualquier lugar objeto.

Veamos un ejemplo con transformaciones simples usando la matriz CSS

La primera transformación que hicimos, se puede escribir como: scaleX(2)

transform: matrix(2, 0, 0, 1, 0, 0)

De manera similar, la segunda transformación que hicimos se puede escribir como (la matriz usa el bronceado del ángulo ):skewY(10deg)

transform: matrix(1, 10deg, 0, 1, 0, 0)

La tercera transformación que hicimos, se puede escribir como (una vez más, matrix usa el bronceado del ángulo ):skewX(15deg)

transform: matrix(1, 0, 15deg, 1, 0, 0)

La cuarta transformación que hicimos, se puede escribir como: scaleY(1.4)

transform: matrix(1, 0, 0, 1.4, 0, 0)

La quinta transformación que hicimos, se puede escribir (sin las unidades px) como :translateX(150px)

transform: matrix(1, 0, 0, 1, 150, 0)

La última transformación que hicimos se puede escribir (sin las unidades px) como:translateY(50px)

transform: matrix(1, 0, 0, 1, 0, 50)

Observe que estamos haciendo una transformación solo en cada caso.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;

}

div#myDiv2 {
  -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */
  transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */
}

</style>
</head>
<body>
<h1>La funcion matrix() </h1>
<p>

El método matrix () combina todos los métodos de transformación 2D en uno</p>
<div>
Este es un elemento div normal..
</div>

<div id="myDiv2">

Usando el método matrix ().

</div>
</body>
</html>