Perspective Origin - Tailwindcss

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

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

<ApiTable rows={[ ["perspective-origin-center", "perspective-origin: center;"], ["perspective-origin-top", "perspective-origin: top;"], ["perspective-origin-top-right", "perspective-origin: top right;"], ["perspective-origin-right", "perspective-origin: right;"], ["perspective-origin-bottom-right", "perspective-origin: bottom right;"], ["perspective-origin-bottom", "perspective-origin: bottom;"], ["perspective-origin-bottom-left", "perspective-origin: bottom left;"], ["perspective-origin-left", "perspective-origin: left;"], ["perspective-origin-top-left", "perspective-origin: top left;"], ["perspective-origin-(<custom-property>)", "perspective-origin: var(<custom-property>);"], ["perspective-origin-[<value>]", "perspective-origin: <value>;"], ]} />

Examples

Basic example

Use utilities like perspective-origin-top and perspective-origin-bottom-left to control where the vanishing point of a perspective is located:

<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-origin-top-left </p> <div className="size-40 p-10"> <div className="size-20 rotate-[0.75_1_0.75_45deg] perspective-near perspective-origin-top-left 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-origin-bottom-right </p> <div className="size-40 p-10"> <div className="size-20 rotate-[0.75_1_0.75_45deg] perspective-near perspective-origin-bottom-right 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-origin-top-left,perspective-origin-bottom-right] -->
<div class="size-20 perspective-near perspective-origin-top-left ...">
  <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-near perspective-origin-bottom-right …">
  <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>

Using a custom value

Responsive design