# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/perspective.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";

export const title = "perspective";
export const description = "Utilities for controlling an element's perspective when placed in 3D space.";

<ApiTable
  rows={[
    ["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>;"],
  ]}
/>

## Examples

### Basic example

Use utilities like `perspective-normal` and `perspective-distant` to control how close or how far away the z-plane is from the screen:

<Figure>

<Example>
  {
    <div className="flex flex-col justify-around gap-8 text-sm leading-6 font-bold text-white sm:flex-row sm:gap-0">
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          perspective-dramatic
        </p>
        <div className="size-56 p-10 py-24">
          <div className="size-20 rotate-[0.75_1_0.75_45deg] perspective-dramatic transform-3d *:backface-visible">
            <div className="absolute inset-0 translate-z-12 rotate-x-0 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 dark:bg-sky-400/85 dark:text-white">
              1
            </div>
            <div className="absolute inset-0 -translate-z-12 rotate-y-180 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 dark:bg-sky-400/85 dark:text-white">
              2
            </div>
            <div className="absolute inset-0 translate-x-12 rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 dark:bg-sky-400/85 dark:text-white">
              3
            </div>
            <div className="absolute inset-0 -translate-x-12 -rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 dark:bg-sky-400/85 dark:text-white">
              4
            </div>
            <div className="absolute inset-0 -translate-y-12 rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 dark:bg-sky-400/85 dark:text-white">
              5
            </div>
            <div className="absolute inset-0 translate-y-12 -rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 dark:bg-sky-400/85 dark:text-white">
              6
            </div>
          </div>
        </div>
      </div>
      <div className="flex shrink-0 flex-col items-center">
        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          perspective-normal
        </p>
        <div className="size-56 p-10">
          <div className="size-20 rotate-[0.75_1_0.75_45deg] perspective-normal transform-3d *:backface-visible">
            <div className="absolute inset-0 translate-z-12 rotate-x-0 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 dark:bg-sky-400/85 dark:text-white">
              1
            </div>
            <div className="absolute inset-0 -translate-z-12 rotate-y-180 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 dark:bg-sky-400/85 dark:text-white">
              2
            </div>
            <div className="absolute inset-0 translate-x-12 rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 dark:bg-sky-400/85 dark:text-white">
              3
            </div>
            <div className="absolute inset-0 -translate-x-12 -rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 dark:bg-sky-400/85 dark:text-white">
              4
            </div>
            <div className="absolute inset-0 -translate-y-12 rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 dark:bg-sky-400/85 dark:text-white">
              5
            </div>
            <div className="absolute inset-0 translate-y-12 -rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 dark:bg-sky-400/85 dark:text-white">
              6
            </div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes: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>
```

</Figure>

This is like moving a camera closer to or further away from an object.

### Removing a perspective

Use the `perspective-none` utility to remove a perspective transform from an element:

```html
<!-- [!code classes:perspective-none] -->
<div class="perspective-none ...">
  <!-- ... -->
</div>
```

### Using a custom value

<UsingACustomValue utility="perspective" value="750px" />

### Responsive design

<ResponsiveDesign property="perspective" defaultClass="perspective-midrange" featuredClass="perspective-dramatic" />

## Customizing your theme

<CustomizingYourTheme utility="perspective" name="perspective" customName="remote" customValue="1800px" />