transform-origin

Ejemplos

Ejemplo básico

Usa utilidades como origin-top y origin-bottom-left para establecer el origen de transformación de un elemento:

origin-center

origin-top-left

origin-bottom

<img class="origin-center rotate-45 ..." src="/img/mountains.jpg" />
<img class="origin-top-left rotate-12 ..." src="/img/mountains.jpg" />
<img class="origin-bottom -rotate-12 ..." src="/img/mountains.jpg" />

Usando un valor personalizado

Usa la sintaxis origin-[<value>] para establecer el transform origin basado en un valor completamente personalizado:

<img class="origin-[33%_75%] ..." src="/img/mountains.jpg" />

Para variables CSS, también puedes usar la sintaxis origin-(<custom-property>) :

<img class="origin-(--my-transform-origin) ..." src="/img/mountains.jpg" />

Esto es solo un atajo para origin-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive Design

Prefija una utilidad transform-origin con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<img class="origin-center md:origin-top ..." src="/img/mountains.jpg" />

Aprende más sobre el uso de variantes en la documentación de variantes.