Summary  
This chapter explains how to apply CSS transform skew functions (skew, skewX, skewY) to deviate an element’s shape along the x- or y-axis by specified degree angles.

General domain of usage  
Front-end web design

`skew()` дозволяє відхиляти сторони елемента відносно координатних осей на заданий кут. Кут необхідно вказувати у градусах (`deg`). Також можна задати викривлення лише по осі x або y. Синтаксис виглядає так:
```css
transform: skew(X_angle, Y_angle);
transform: skewX(angle);
transform: skewY(angle);
```
- `skew()` приймає 2 значення. Значення `X_angle` визначає кут викривлення по осі x. Значення `Y_angle` визначає кут викривлення по осі y. Якщо друге значення (`Y_angle`) не вказано, браузер сприймає це як `skewX()`;
- `skewX(angle)` визначає викривлення по осі x;
- `skewY(angle)` визначає викривлення по осі y.

Розглянемо наступний приклад, щоб побачити, яких результатів можна досягти за допомогою викривлення:


PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+c2tldygyMGRlZywgLTMwZGVnKTwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJib3giPnNrZXdYKC02MGRlZyk8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij5za2V3WSg2MGRlZyk8L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCi5ib3g6bnRoLWNoaWxkKDEpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjOThkYmM2OwogIGFuaW1hdGlvbjogcm90YXRlMSA3MDAwbXMgaW5maW5pdGUgMTAwMG1zOwp9CgouYm94Om50aC1jaGlsZCgyKSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2U2ZDcyYTsKICBhbmltYXRpb246IHJvdGF0ZTIgNzAwMG1zIGluZmluaXRlIDEwMDBtczsKfQoKLmJveDpudGgtY2hpbGQoMykgewogIGJhY2tncm91bmQtY29sb3I6ICNmMThkOWU7CiAgYW5pbWF0aW9uOiByb3RhdGUzIDcwMDBtcyBpbmZpbml0ZSAxMDAwbXM7Cn0KCkBrZXlmcmFtZXMgcm90YXRlMSB7CiAgMCUgewogICAgdHJhbnNmb3JtOiBza2V3KDAsIDApOwogIH0KCiAgNTAlIHsKICAgIHRyYW5zZm9ybTogc2tldygyMGRlZywgLTMwZGVnKTsKICB9CgogIDEwMCUgewogICAgdHJhbnNmb3JtOiBza2V3KDAsIDApOwogIH0KfQoKQGtleWZyYW1lcyByb3RhdGUyIHsKICAwJSB7CiAgICB0cmFuc2Zvcm06IHNrZXdYKDApOwogIH0KCiAgNTAlIHsKICAgIHRyYW5zZm9ybTogc2tld1goLTYwZGVnKTsKICB9CgogIDEwMCUgewogICAgdHJhbnNmb3JtOiBza2V3WCgwKTsKICB9Cn0KCkBrZXlmcmFtZXMgcm90YXRlMyB7CiAgMCUgewogICAgdHJhbnNmb3JtOiBza2V3WSgwKTsKICB9CgogIDUwJSB7CiAgICB0cmFuc2Zvcm06IHNrZXdZKDYwZGVnKTsKICB9CgogIDEwMCUgewogICAgdHJhbnNmb3JtOiBza2V3WSgwKTsKICB9Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwouY29udGFpbmVyIHsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KCi5ib3ggewogIGZvbnQtc2l6ZTogMjJweDsKICBjb2xvcjogIzMyNDg1MTsKICBmbGV4LWJhc2lzOiBjYWxjKDEwMCUgLyAzIC0gMTBweCk7CiAgaGVpZ2h0OiAxNTBweDsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYm9yZGVyLXJhZGl1czogMjBweDsKICBtYXJnaW46IDEwcHg7CiAgYm94LXNoYWRvdzogMHB4IDJweCAxcHggLTFweCByZ2JhKDAsIDAsIDAsIDAuMiksCiAgICAwcHggMXB4IDFweCAwcHggcmdiYSgwLCAwLCAwLCAwLjE0KSwgMHB4IDFweCAzcHggMHB4IHJnYmEoMCwgMCwgMCwgMC4xMik7Cn0=

Виберіть правильне твердження.

Підвищуйте свої навички стилізації, опановуючи сучасні техніки CSS для вебдизайну. Розміщуйте та керуйте елементами з точністю за допомогою розширених стратегій позиціонування. Створюйте плавні переходи та захоплюючі анімації для покращення взаємодії з користувачем. Трансформуйте та змінюйте елементи для динамічних візуальних ефектів. Створюйте адаптивні дизайни для різних пристроїв і оптимізуйте робочий процес за допомогою CSS-препроцесорів, таких як Sass.

Дослідження очікувань слухачів від цього курсу з розширеного стилювання HTML та CSS. Необхідні попередні знання перед початком курсу. Теми, які будуть розглянуті у курсі.

Позиціонування та керування елементами на вебсторінках. Огляд різних властивостей позиціонування, вивчення використання порядку накладання для контролю видимості елементів, що перекривають один одного, а також робота з переповненням вмісту.

Дослідження можливостей переходів та вивчення способів покращення взаємодії з користувачем. Ознайомлення з методами плавної та поступової анімації властивостей для забезпечення непомітних змін стану.

Дізнайтеся про властивість animation та її використання для створення динамічних і привабливих дизайнів. Ознайомтеся зі створенням складних анімацій за допомогою keyframes і керуванням анімацією.

Дослідження властивості transform, яка дозволяє змінювати вигляд і розташування елементів на вебсторінці. Вивчення масштабування, обертання, перекошування та переміщення елементів у двох- і тривимірному просторі. Комбінування кількох трансформацій для створення складніших ефектів.

Принципи та методи, що використовуються в адаптивному та респонсивному дизайні, спрямовані на забезпечення доступності та візуальної привабливості вебсайтів і застосунків на різних пристроях, розмірах екранів і орієнтаціях.

Дізнайтеся про препроцесори в CSS та їхню роль у написанні більш ефективного й підтримуваного коду. Ознайомтеся з використанням препроцесорів для спрощення робочого процесу та створення чистішого CSS-коду.

Нахил Елементів для Унікальних Дизайнів