` 20 graus ao longo do eixo Y:
### Exemplo:
```css
div {
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
```
## O método skew ()
O método `skew()` inclina um elemento ao longo dos eixos X e Y pelos ângulos dados.
O exemplo a seguir inclina o elemento `
` 20 graus ao longo do eixo X e 10 graus ao longo do eixo Y:
### Exemplo:
```css
div {
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
```
Se o segundo parâmetro não for especificado, ele terá um valor zero. Então, o seguinte exemplo inclina o elemento `
` 20 graus ao longo do eixo X:
### Exemplo:
```css
div {
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
```
## O método matrix ()
O método `matrix()` combina todos os métodos de transformação 2D em um.
O método matrix () utiliza seis parâmetros, contendo funções matemáticas, que permite girar, dimensionar, mover (transladar) e inclinar elementos.
Os parâmetros são os seguintes: matriz (scaleX (), skewY (), skewX (), escalaY (), translateX (), translateY ())
### Exemplo:
```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);
}
```
## Propriedades de Transformação CSS3
A tabela a seguir lista todas as propriedades de transformação 2D:
| Propriedade | Descrição | | ---------------- | -------------------------------------------------- ------- | | transformar | Aplica uma transformação 2D ou 3D a um elemento | | transformação-origem | Permite que você mude a posição nos elementos transformados |
## Métodos de transformação 2D
| Função | Descrição | | --------------------- | -------------------------------------------------- ----------------------- | | matriz (n, n, n, n, n) | Define uma transformação 2D, usando uma matriz de seis valores | | translate (x, y) | Define uma tradução 2D, movendo o elemento ao longo dos eixos X e Y | | translateX (n) | Define uma tradução 2D, movendo o elemento ao longo do eixo X | | translateY (n) | Define uma tradução 2D, movendo o elemento ao longo do eixo Y | | escala (x, y) | Define uma transformação em escala 2D, alterando os elementos width e height | | escalaX (n) | Define uma transformação em escala 2D, alterando a largura do elemento | | escalaY (n) | Define uma transformação em escala 2D, alterando a altura do elemento | | rodar (ângulo) | Define uma rotação 2D, o ângulo é especificado no parâmetro | | inclinação (ângulo x, ângulo y) | Define uma transformação de inclinação 2D ao longo dos eixos X e Y | | skewX (ângulo) | Define uma transformação de inclinação 2D ao longo do eixo X | | skewY (ângulo) | Define uma transformação de inclinação 2D ao longo do eixo Y |
## Mais Informações:
* https://css-tricks.com/almanac/properties/t/transform/
* https://www.w3schools.com/css/css3\_2dtransforms.asp
* https://developer.mozilla.org/pt-BR/docs/Web/CSS/transform