Documentación offline Tailwind CSS main
/ ó ⌘K
por @raupulus

perspective-origin

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página
Clase Propiedades CSS
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:

{

perspective-origin-top-left

1
2
3
4
5
6

perspective-origin-bottom-right

1
2
3
4
5
6
}

<!-- [!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>

Using a custom value#

Responsive design#