` 20 grados a lo largo del eje Y:
### Ejemplo:
```css
div {
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
```
## El método de sesgo ()
El método `skew()` sesga un elemento a lo largo de los ejes X e Y según los ángulos dados.
El siguiente ejemplo muestra el elemento `
` 20 grados a lo largo del eje X, y 10 grados a lo largo del eje Y:
### Ejemplo:
```css
div {
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
```
Si no se especifica el segundo parámetro, tiene un valor cero. Así, los siguientes el ejemplo desvía el elemento `
` 20 grados a lo largo del eje X:
### Ejemplo:
```css
div {
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
```
## El método de la matriz ()
El método `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, que le permite rotar, escalar, mover (traducir) y sesgar elementos.
Los parámetros son los siguientes: matriz (scaleX (), skewY (), skewX (), scaleY (), translateX (), translateY ())
### Ejemplo:
```css
div {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
```
## Propiedades de la transformación CSS3
La siguiente tabla enumera todas las propiedades de transformación 2D:
| Propiedad | Descripción | | ---------------- | -------------------------------------------------- ------- | | transformar Aplica una transformación 2D o 3D a un elemento | | origen transformado | Le permite cambiar la posición de los elementos transformados |
## Métodos de transformación 2D
| Función | Descripción | | --------------------- | -------------------------------------------------- ----------------------- | | matriz (n, n, n, n, n, n) | Define una transformación 2D, utilizando una matriz de seis valores | | traducir (x, y) | Define una traducción 2D, moviendo el elemento a lo largo del eje X y el eje Y | | traducirX (n) | Define una traducción 2D, moviendo el elemento a lo largo del eje X | | traducirY (n) | Define una traducción 2D, moviendo el elemento a lo largo del eje Y | | escala (x, y) | Define una transformación de escala 2D, cambiando los elementos ancho y alto | | escalaX (n) | Define una transformación de escala 2D, cambiando el ancho del elemento | | escalaY (n) | Define una transformación de escala 2D, cambiando la altura del elemento | | girar (ángulo) | Define una rotación 2D, el ángulo se especifica en el parámetro | | sesgo (ángulo x, ángulo y) | Define una transformación de sesgo 2D a lo largo del eje X y el eje Y | | skewX (ángulo) | Define una transformación de sesgo 2D a lo largo del eje X | | skewY (ángulo) | Define una transformación de sesgo 2D a lo largo del eje Y |
## Más información:
* https://css-tricks.com/almanac/properties/t/transform/
* https://www.w3schools.com/css/css3\_2dtransforms.asp
* https://developer.mozilla.org/en-US/docs/Web/CSS/transform