Трансформации
scale
Утилиты для масштабирования элементов.
| Class | Styles |
|---|---|
scale-none | scale: none; |
scale-<number> | scale: <number>% <number>%; |
-scale-<number> | scale: calc(<number>% * -1) calc(<number>% * -1); |
scale-(<custom-property>) | scale: var(<custom-property>) var(<custom-property>); |
scale-[<value>] | scale: <value>; |
scale-x-<number> | scale: <number>% var(--tw-scale-y); |
-scale-x-<number> | scale: calc(<number>% * -1) var(--tw-scale-y); |
scale-x-(<custom-property>) | scale: var(<custom-property>) var(--tw-scale-y); |
scale-x-[<value>] | scale: <value> var(--tw-scale-y); |
scale-y-<number> | scale: var(--tw-scale-x) <number>%; |
-scale-y-<number> | scale: var(--tw-scale-x) calc(<number>% * -1); |
scale-y-(<custom-property>) | scale: var(--tw-scale-x) var(<custom-property>); |
scale-y-[<value>] | scale: var(--tw-scale-x) <value>; |
scale-z-<number> | scale: var(--tw-scale-x) var(--tw-scale-y) <number>%; |
-scale-z-<number> | scale: var(--tw-scale-x) var(--tw-scale-y) calc(<number>% * -1); |
scale-z-(<custom-property>) | scale: var(--tw-scale-x) var(--tw-scale-y) var(<custom-property>); |
scale-z-[<value>] | scale: var(--tw-scale-x) var(--tw-scale-y) <value>; |
scale-3d | scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); |
Примеры
Базовый пример
Используйте утилиты scale-<number>, такие как scale-75 и scale-150, чтобы масштабировать элемент на определённый процент от его исходного размера:
scale-75
scale-100
scale-125
<img class="scale-75 ..." src="/img/mountains.jpg" /><img class="scale-100 ..." src="/img/mountains.jpg" /><img class="scale-125 ..." src="/img/mountains.jpg" />Масштабирование по оси X
Используйте утилиты scale-x-<number>, такие как scale-x-75 и -scale-x-150, чтобы масштабировать элемент по оси X на определённый процент от его исходной ширины:
scale-x-75
scale-x-100
scale-x-125
<img class="scale-x-75 ..." src="/img/mountains.jpg" /><img class="scale-x-100 ..." src="/img/mountains.jpg" /><img class="scale-x-125 ..." src="/img/mountains.jpg" />Масштабирование по оси Y
Используйте утилиты scale-y-<number>, такие как scale-y-75 и -scale-y-150, чтобы масштабировать элемент по оси Y на определённый процент от его исходной высоты:
scale-y-75
scale-y-100
scale-y-125
<img class="scale-y-75 ..." src="/img/mountains.jpg" /><img class="scale-y-100 ..." src="/img/mountains.jpg" /><img class="scale-y-125 ..." src="/img/mountains.jpg" />Использование отрицательных значений
Используйте утилиты -scale-<number>, -scale-x-<number> или -scale-y-<number>, такие как -scale-x-75 и -scale-125, чтобы отразить и уменьшить элемент на определённый процент от его исходного размера:
-scale-x-75
-scale-100
-scale-y-125
<img class="-scale-x-75 ..." src="/img/mountains.jpg" /><img class="-scale-100 ..." src="/img/mountains.jpg" /><img class="-scale-y-125 ..." src="/img/mountains.jpg" />Использование пользовательского значения
Используйте синтаксис scale-[<value>] , чтобы задать scale на основе полностью пользовательского значения:
<img class="scale-[1.7] ..." src="/img/mountains.jpg" />Для переменных CSS вы также можете использовать синтаксис: scale-(<custom-property>)
<img class="scale-(--my-scale) ..." src="/img/mountains.jpg" />Это просто сокращение, scale-[var(<custom-property>)] которое автоматически добавляет функцию var().
Применение при наведении
Префикс a scale утилиты с вариантом, например hover:*, чтобы применить утилиту только в этом состоянии:
<img class="scale-95 hover:scale-120 ..." src="/img/mountains.jpg" />Подробнее об использовании вариантов читайте в документации по вариантам.