translate

Ejemplos

Usando la escala de espaciado

Usa utilidades translate-<number> como translate-2 y -translate-4 para trasladar un elemento en ambos ejes basado en la escala de espaciado:

-translate-6

translate-2

translate-8

<img class="-translate-6 ..." src="/img/mountains.jpg" />
<img class="translate-2 ..." src="/img/mountains.jpg" />
<img class="translate-8 ..." src="/img/mountains.jpg" />

Usando un porcentaje

Usa utilidades translate-<fraction> como translate-1/4 y -translate-full para trasladar un elemento en ambos ejes por un porcentaje del tamaño del elemento:

-translate-1/4

translate-1/6

translate-1/2

<img class="-translate-1/4 ..." src="/img/mountains.jpg" />
<img class="translate-1/6 ..." src="/img/mountains.jpg" />
<img class="translate-1/2 ..." src="/img/mountains.jpg" />

Trasladando en el eje x

Usa utilidades translate-x-<number> o translate-x-<fraction> como translate-x-4 y translate-x-1/4 para trasladar un elemento en el eje x:

-translate-x-4

translate-x-2

translate-x-1/2

<img class="-translate-x-4 ..." src="/img/mountains.jpg" />
<img class="translate-x-2 ..." src="/img/mountains.jpg" />
<img class="translate-x-1/2 ..." src="/img/mountains.jpg" />

Trasladando en el eje y

Usa utilidades translate-y-<number> o translate-y-<fraction> como translate-y-6 y translate-y-1/3 para trasladar un elemento en el eje y:

-translate-y-4

translate-y-2

translate-y-1/2

<img class="-translate-y-4 ..." src="/img/mountains.jpg" />
<img class="translate-y-2 ..." src="/img/mountains.jpg" />
<img class="translate-y-1/2 ..." src="/img/mountains.jpg" />

Trasladando en el eje z

Usa utilidades translate-z-<number> como translate-z-6 y -translate-z-12 para trasladar un elemento en el eje z:

-translate-z-8

translate-z-4

translate-z-12

<div class="transform-3d">
  <img class="-translate-z-8 rotate-x-50 rotate-z-45 ..." src="/img/mountains.jpg" />
  <img class="translate-z-2 rotate-x-50 rotate-z-45 ..." src="/img/mountains.jpg" />
  <img class="translate-z-1/2 rotate-x-50 rotate-z-45 ..." src="/img/mountains.jpg" />
</div>

Ten en cuenta que las utilidades translate-z-<number> requieren que la utilidad transform-3d se aplique al elemento padre.

Usando un valor personalizado

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

<img class="translate-[3.142rad] ..." src="/img/mountains.jpg" />

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

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

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

Responsive design

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

<img class="translate-45 md:translate-60 ..." src="/img/mountains.jpg" />

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