Трансформации
Утилиты для управления перспективой элемента при размещении в 3D пространстве.
| Class | Styles |
|---|---|
perspective-dramatic | perspective: var(--perspective-dramatic); /* 100px */ |
perspective-near | perspective: var(--perspective-near); /* 300px */ |
perspective-normal | perspective: var(--perspective-normal); /* 500px */ |
perspective-midrange | perspective: var(--perspective-midrange); /* 800px */ |
perspective-distant | perspective: var(--perspective-distant); /* 1200px */ |
perspective-none | perspective: none; |
perspective-(<custom-property>) | perspective: var(<custom-property>); |
perspective-[<value>] | perspective: <value>; |
Используйте утилиты такие как perspective-normal и perspective-distant для управления тем, насколько близко или далеко z-плоскость находится от экрана:
perspective-dramatic
perspective-normal
<div class="size-20 perspective-dramatic ..."> <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div> <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div> <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div> <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div> <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div> <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div></div><div class="size-20 perspective-normal ..."> <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div> <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div> <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div> <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div> <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div> <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div></div>Это похоже на приближение или удаление камеры от объекта.
Используйте утилиту perspective-none для удаления перспективного преобразования из элемента:
<div class="perspective-none ..."> <!-- ... --></div>Используйте синтаксис perspective-[<value>] , чтобы задать perspective на основе полностью пользовательского значения:
<div class="perspective-[750px] ..."> <!-- ... --></div>Для переменных CSS вы также можете использовать синтаксис: perspective-(<custom-property>)
<div class="perspective-(--my-perspective) ..."> <!-- ... --></div>Это просто сокращение, perspective-[var(<custom-property>)] которое автоматически добавляет функцию var().
Префикс a perspective утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="perspective-midrange md:perspective-dramatic ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.
Используйте переменные темы --perspective-* для настройки утилит perspective в вашем проекте:
@theme { --perspective-remote: 1800px; }Теперь утилиту perspective-remote можно использовать в вашей разметке:
<div class="perspective-remote"> <!-- ... --></div>Подробнее о настройке темы читайте в документации темы.