This page is being translated; the original is shown (Русский ).
Масштабирование
Классы scale-* уменьшают или увеличивают элемент относительно его центра,
не меняя место в раскладке. Берите их для отклика карточек и кнопок на
наведение, для эффектов появления и для сжатия элемента по одной оси.
Пример
Шкала
Пунктир — размер элемента без масштаба. Подпись — класс.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-wrap gap-4 items-end" >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary scale-0" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >scale-0</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary scale-1/4" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >scale-1/4</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary scale-1/3" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >scale-1/3</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary scale-1/2" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >scale-1/2</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary scale-1" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >scale-1</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary scale-2" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >scale-2</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary scale-3" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >scale-3</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary scale-4" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >scale-4</code >
</div >
</div >
Одна ось
scale-x-* и scale-y-* меняют только ширину или только высоту.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-wrap gap-4 items-end" >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary scale-x-1/4" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >scale-x-1/4</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary scale-x-4" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >scale-x-4</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary scale-y-1/4" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >scale-y-1/4</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary scale-y-4" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >scale-y-4</code >
</div >
</div >
При наведении
Префикс hover: масштабирует элемент, пока над ним указатель. Наведите
указатель на образцы; плавность даёт класс transition-transform.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-wrap gap-4 items-end" >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary transition-transform hover:scale-1/2 cursor-pointer" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >hover:scale-1/2</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary transition-transform hover:scale-2 cursor-pointer" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >hover:scale-2</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary transition-transform hover:scale-4 cursor-pointer" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >hover:scale-4</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary transition-transform hover:scale-x-4 cursor-pointer" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >hover:scale-x-4</code >
</div >
</div >
Классы
Класс
CSS
Значения
scale-0transform: scale(0)—
scale-x-0transform: scaleX(0)—
scale-y-0transform: scaleY(0)—
scale-1/4transform: scale(0.8)—
scale-x-1/4transform: scaleX(0.8)—
scale-y-1/4transform: scaleY(0.8)—
scale-1/3transform: scale(0.9)—
scale-x-1/3transform: scaleX(0.9)—
scale-y-1/3transform: scaleY(0.9)—
scale-1/2transform: scale(0.95)—
scale-x-1/2transform: scaleX(0.95)—
scale-y-1/2transform: scaleY(0.95)—
scale-1transform: scale(1)—
scale-x-1transform: scaleX(1)—
scale-y-1transform: scaleY(1)—
scale-2transform: scale(1.05)—
scale-x-2transform: scaleX(1.05)—
scale-y-2transform: scaleY(1.05)—
scale-3transform: scale(1.1)—
scale-x-3transform: scaleX(1.1)—
scale-y-3transform: scaleY(1.1)—
scale-4transform: scale(1.2)—
scale-x-4transform: scaleX(1.2)—
scale-y-4transform: scaleY(1.2)—
Условия (что это ): ширина экрана — нет; состояния — hover:. Например: hover:scale-0.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Шкала
Номер ступени — не множитель: ступени меньше 1 уменьшают элемент, больше 1 —
увеличивают.
Ступень
Масштаб
00
1/40,8
1/30,9
1/20,95
11
21,05
31,1
41,2
Ступени одинаковы для scale-*, scale-x-* и scale-y-*. Для отклика
на наведение хватает scale-2 или scale-3; scale-1/2 подходит для
эффекта нажатия.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="transition-transform hover:scale-2" >Карточка</div >
Скрыть и показать
scale-0 сжимает элемент в точку, но он остаётся в раскладке и доступен
программам экранного доступа. Чтобы убрать элемент совсем, сочетайте
трансформацию с видимостью .
Ограничения
Классы поворота, масштаба, наклона и смещения задают одно свойство
transform целиком, поэтому на одном элементе действует только один из
них: rotate-45 scale-2 не повернёт и не увеличит элемент одновременно.
Сочетаются только смещения по x и y между собой.
Трансформация не меняет раскладку: соседние элементы остаются на местах, а
увеличенный или повёрнутый элемент может перекрыть их.
Увеличение растягивает уже отрисованный элемент: мелкий текст и тонкие
линии при scale-4 могут стать размытыми.
Из префиксов есть только hover:; префиксов ширины экрана нет.
См. также
Предыдущая Вращение Следующая Наклон
