Наклон
transform-skew
hover
В SIMAI Framework с помощью модифкаторов можно управлять наклоном элементов с трансформацией.
Классы
| Класс | Значение |
|---|---|
skew-x-0 |
transform: skewX(0deg);
|
skew-y-0 |
transform: skewY(0deg);
|
skew-x-1 |
transform: skewX(1deg);
|
skew-y-1 |
transform: skewY(1deg);
|
skew-x-2 |
transform: skewX(2deg);
|
skew-y-2 |
transform: skewY(2deg);
|
skew-x-3 |
transform: skewX(3deg);
|
skew-y-3 |
transform: skewY(3deg);
|
skew-x-4 |
transform: skewX(6deg);
|
skew-y-4 |
transform: skewY(6deg);
|
skew-x-5 |
transform: skewX(12deg);
|
skew-y-5 |
transform: skewY(12deg);
|
skew-x-6 |
transform: skewX(45deg);
|
skew-y-6 |
transform: skewY(45deg);
|
skew-x-7 |
transform: skewX(90deg);
|
skew-y-7 |
transform: skewY(90deg);
|
skew-x-8 |
transform: skewX(180deg);
|
skew-y-8 |
transform: skewY(180deg);
|
Описание
Адаптивный модификатор. Задает наклон в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
-
Контрольная точка. Необязательный параметр.
Применяет модификатор начиная с определенного размера области
просмотра, согласно контрольным точкам
(
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр.
Пример
skew-y-0
skew-y-3
skew-y-6
skew-y-12
<img class="skew-y-0 ...">
<img class="skew-y-3 ...">
<img class="skew-y-4 ...">
<img class="skew-y-5 ...">