` 20 градусов по оси Y:
### Пример:
```css
div {
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
```
## Метод skew ()
Метод `skew()` искажает элемент вдоль оси X и Y по заданным углам.
Следующий пример пересекает элемент `
` 20 градусов по оси X и 10 градусов по оси Y:
### Пример:
```css
div {
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
```
Если второй параметр не указан, он имеет нулевое значение. Итак, следующее пример перечеркивает элемент `
` 20 градусов по оси X:
### Пример:
```css
div {
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
```
## Метод matrix ()
Метод `matrix()` объединяет все методы двумерного преобразования в один.
Метод matrix () принимает шесть параметров, содержащих математические функции, которые позволяет вращать, масштабировать, перемещать (переводить) и искажать элементы.
Параметры следующие: Матрица (Scalex (), skewY (), skewX (), ScaleY (), translateX (), translateY ())
### Пример:
```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);
}
```
## Свойства преобразования CSS3
В следующей таблице перечислены все свойства 2D-преобразования:
| Недвижимость | Описание | | ---------------- | -------------------------------------------------- ------- | | трансформировать | Применяет преобразование 2D или 3D к элементу | | transform-origin | Позволяет изменить положение на преобразованных элементах |
## Методы 2D-преобразования
| Функция | Описание | | --------------------- | -------------------------------------------------- ----------------------- | | матрица (n, n, n, n, n, n) | Определяет 2D-преобразование, используя матрицу из шести значений | | переводить (x, y) | Определяет 2D-перевод, перемещая элемент вдоль оси X и Y. | translateX (n) | Определяет 2D-перевод, перемещая элемент вдоль оси X | | translateY (n) | Определяет 2D-перевод, перемещая элемент вдоль оси Y | | масштаб (x, y) | Определяет преобразование 2D-масштаба, изменяя ширину и высоту элементов | | scaleX (n) | Определяет преобразование 2D-масштаба, изменяя ширину элемента | | scaleY (n) | Определяет 2D-масштабное преобразование, изменяя высоту элемента | | вращение (угол) | Определяет двумерное вращение, угол указан в параметре | | косо (х-угол, у-угол) | Определяет двумерное косое преобразование вдоль оси X и Y. | skewX (угол) | Определяет двумерное косое преобразование вдоль оси X | | skewY (угол) | Определяет двумерное косое преобразование вдоль оси Y |
## Дополнительная информация:
* 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