Tailwind CSS · Utilities reference · all subjects

perspective

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

perspective utility classes and CSS output

The perspective utilities control an element's perspective when placed in 3D space. The available classes are: 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>);), and perspective-[<value>] (perspective: <value>;).

perspective-none removes perspective transform

The perspective-none utility removes a perspective transform from an element by applying perspective: none;

perspective utilities with arbitrary values

You can use perspective-[<value>] syntax to apply an arbitrary perspective value, or perspective-(<custom-property>) to use a custom CSS property.

perspective responsive design

Perspective utilities support responsive design variants. You can apply different perspective values at different breakpoints, for example perspective-dramatic at small screens and perspective-normal at larger screens.

perspective theme customization

The perspective theme values can be customized in your Tailwind configuration. You can override the default perspective values (dramatic, near, normal, midrange, distant) or add new custom perspective values.

perspective example basic usage

This example shows how to use perspective utilities with 3D transforms: ```html <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> ``` This demonstrates perspective-dramatic (100px, closer z-plane) versus perspective-normal (500px, farther z-plane) applied to 3D-transformed elements.

Give your agent this brain