Perspective

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> </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:

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" />