This page is being translated; the original is shown (Русский ).
Наклон
Классы skew-x-* и skew-y-* скашивают элемент: x наклоняет
вертикальные стороны, 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 skew-x-0" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >skew-x-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 skew-x-1" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >skew-x-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 skew-x-2" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >skew-x-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 skew-x-3" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >skew-x-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 skew-x-5" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >skew-x-5</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 skew-x-15" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >skew-x-15</code >
</div >
</div >
По вертикали
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 skew-y-0" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >skew-y-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 skew-y-1" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >skew-y-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 skew-y-2" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >skew-y-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 skew-y-3" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >skew-y-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 skew-y-5" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >skew-y-5</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 skew-y-15" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >skew-y-15</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:skew-x-15 cursor-pointer" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >hover:skew-x-15</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:skew-y-15 cursor-pointer" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >hover:skew-y-15</code >
</div >
</div >
Классы
Класс
CSS
Значения
skew-x-0transform: skewX(0deg)—
skew-y-0transform: skewY(0deg)—
skew-x-1transform: skewX(1deg)—
skew-y-1transform: skewY(1deg)—
skew-x-2transform: skewX(2deg)—
skew-y-2transform: skewY(2deg)—
skew-x-3transform: skewX(3deg)—
skew-y-3transform: skewY(3deg)—
skew-x-5transform: skewX(5deg)—
skew-y-5transform: skewY(5deg)—
skew-x-15transform: skewX(15deg)—
skew-y-15transform: skewY(15deg)—
Условия (что это ): ширина экрана — нет; состояния — hover:. Например: hover:skew-x-0.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Выбор угла
Число в имени класса — угол в градусах: 0, 1, 2, 3, 5, 15.
Мелкие углы дают едва заметную динамику, 15 — выраженный скос.
Скошенная плашка с прямым текстом
Наклон действует и на содержимое. Чтобы текст остался прямым, скашивают
только фон — отдельный элемент под текстом:
HTML wrap_text Wrap source lines content_copy Copy
<span class ="relative inline-block p-1" >
<span class ="absolute inset-0 bg-primary skew-x-15" ></span >
<span class ="relative color-on-primary" >Новинка</span >
</span >
Ограничения
Классы поворота, масштаба, наклона и смещения задают одно свойство
transform целиком, поэтому на одном элементе действует только один из
них: rotate-45 scale-2 не повернёт и не увеличит элемент одновременно.
Сочетаются только смещения по x и y между собой.
Трансформация не меняет раскладку: соседние элементы остаются на местах, а
увеличенный или повёрнутый элемент может перекрыть их.
Отрицательных углов нет.
Из префиксов есть только hover:; префиксов ширины экрана нет.
См. также
Предыдущая Масштабирование Следующая Смещение
