Смещение
transform-translate
hover
В SIMAI Framework с помощью модифкаторов можно управлять переводом элементов с трансформацией.
Классы
| Класс | Значение |
|---|---|
translate-x-0 |
transform: translateX(var(--sf-0px));
|
translate-y-0 |
transform: translateY(var(--sf-0px));
|
translate-x-1 |
transform: translateX(var(--sf-px));
|
translate-y-1 |
transform: translateY(var(--sf-px));
|
translate-x-2 |
transform: translateX(var(--sf-a2));
|
translate-y-2 |
transform: translateY(var(--sf-a2));
|
translate-x-3 |
transform: translateX(var(--sf-a4));
|
translate-y-3 |
transform: translateY(var(--sf-a4));
|
translate-x-4 |
transform: translateX(var(--sf-a6));
|
translate-y-4 |
transform: translateY(var(--sf-a6));
|
translate-x-5 |
transform: translateX(var(--sf-a8));
|
translate-y-5 |
transform: translateY(var(--sf-a8));
|
translate-x-6 |
transform: translateX(var(--sf-b0));
|
translate-y-6 |
transform: translateY(var(--sf-b0));
|
translate-x-7 |
transform: translateX(var(--sf-b2));
|
translate-y-7 |
transform: translateY(var(--sf-b2));
|
translate-x-8 |
transform: translateX(var(--sf-b4));
|
translate-y-8 |
transform: translateY(var(--sf-b4));
|
translate-x-9 |
transform: translateX(var(--sf-b6));
|
translate-y-9 |
transform: translateY(var(--sf-b6));
|
Описание
Адаптивный модификатор. Задает вращение в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
-
Контрольная точка. Необязательный параметр.
Применяет модификатор начиная с определенного размера области
просмотра, согласно контрольным точкам
(
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр.
Пример
translate-y-9
translate-x-9
<img class="translate-y-9 ...">
<img class="translate-x-9 ...">