Масштабирование
transform-scale
hover
В SIMAI Framework с помощью модифкаторов можно управлять увеличением элементов.
Классы
| Класс | Значение |
|---|---|
scale-0 |
transform: scale(0);
|
scale-x-0 |
transform: scaleX(0);
|
scale-y-0 |
transform: scaleY(0);
|
scale-1 |
transform: scale(0.5);
|
scale-x-1 |
transform: scaleX(0.5);
|
scale-y-1 |
transform: scaleY(0.5);
|
scale-2 |
transform: scale(0.75);
|
scale-x-2 |
transform: scaleX(0.75);
|
scale-y-2 |
transform: scaleY(0.75);
|
scale-3 |
transform: scale(0.9);
|
scale-x-3 |
transform: scaleX(0.9);
|
scale-y-3 |
transform: scaleY(0.9);
|
scale-4 |
transform: scale(0.95);
|
scale-x-4 |
transform: scaleX(0.95);
|
scale-y-4 |
transform: scaleY(0.95);
|
scale-5 |
transform: scale(1);
|
scale-x-5 |
transform: scaleX(1);
|
scale-y-5 |
transform: scaleY(1);
|
scale-6 |
transform: scale(1.05);
|
scale-x-6 |
transform: scaleX(1.05);
|
scale-y-6 |
transform: scaleY(1.05);
|
scale-7 |
transform: scale(1.1);
|
scale-x-7 |
transform: scaleX(1.1);
|
scale-y-7 |
transform: scaleY(1.1);
|
scale-8 |
transform: scale(1.25);
|
scale-x-8 |
transform: scaleX(1.25);
|
scale-y-8 |
transform: scaleY(1.25);
|
scale-9 |
transform: scale(1.5);
|
scale-x-9 |
transform: scaleX(1.5);
|
scale-y-9 |
transform: scaleY(1.5);
|
Описание
Адаптивный модификатор. Задает масштабирование элементов с преобразованием в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр.
Пример
scale-2
scale-5
scale-8
<img class="scale-2 ...">
<img class="scale-5 ...">
<img class="scale-8 ...">