Нахиляє елемент у двовимірному просторі по горизонталі та вертикалі або одночасно у двох напрямках.
Нахил за допомогою skew(αx, αy) продемонстрований у табл. 1.
 | transform: skew(0) | Початкове зображення. |
| transform: skew(10deg, 0) | Нахил вліво на 10°. |
| transform: skew(-10deg, 0) | Нахил вправо на 10°. |
| transform: skew(0, 10deg) | Нахил вниз на 10°. |
| transform: skew(0,-10deg) | Нахил вгору на 10°. |
| transform: skew(10deg, 10 deg) | Нахил вліво і вниз на 10°. |
Синтаксис
<code>transform: skew(αx); transform: skew(αx, αy);
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися у вказаному порядку. | <размер> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
- αx
- Вказує кут нахилу по горизонталі. Позитивне значення нахиляє вліво, негативне вправо. Задає кут нахилу по вертикалі. Позитивне значення нахиляє вниз негативне вгору. Якщо значення не вказано, то за замовчуванням приймається рівним 0 і спотворення по вертикалі не відбувається.
Одне значення визначає нахил елемента лише по горизонталі. Два значення задають нахил елемента по горизонталі та вертикалі незалежно. Значення 0 залишає елемент без спотворень.
Пісочниця
img { transform : skew(<span class="playground-active">{{ playgroundValue }}deg</span>); }Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>skew()</title> <style> li { background: #a9c358; /* Колір тла */
list-style: none; /* Забираємо маркери */
width: 300px; /* Ширина списку */
margin-bottom: 10px; /* Відступ знизу */
transform: skew(-30deg); /* Нахиляємо вправо */
}
li a { color: #2c285d; /* Колір посилань */
text-decoration: none; /* Забираємо підкреслення */
display: block; /* Блокові посилання */
padding: 5px 20px; /* Поля */
transform: skew(30deg); /* Нахиляємо посилання назад */
}
</style>
</head>
<body> <ul> <li><a href="#">Піраміда Хеопса</a></li> <li><a href="#">Висячі сади Семіраміди</a></li> <li><a href="#">Статуя Зевса в Олімпії</a></li> <li><a href="#">Храм Артеміди в Ефесі</a></li> <li><a href="#">Мавзолей у Галікарнасі</a></li> <li><a href="#">Колос Родоський</a></li> <li><a href="#">Олександрійський маяк</a></li>
</ul>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Використання skew() для нахилу
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Transforms Module Level 1 | Робочий проект |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| 9 | 12 | 4 | 11.5 | 3.1 | 3.5 |
| 2.1 | 3.5 | 12 | 3.2 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- — властивість браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, зазначених у специфікації.
Кількість вказує версію браузера, починаючи з якої властивість підтримується.="container credit">
Автор та редактори
Остання зміна : 02.03.2020
Редактори: Влад Мержевич