Elements logo

Translate

Utilities for translating elements with transform

Class reference

ClassProperties
.translate-x-0--transform-translate-x: 0;
.translate-y-0--transform-translate-y: 0;
.translate-x-px--transform-translate-x: 1px;
.translate-y-px--transform-translate-y: 1px;
.translate-x-0.5--transform-translate-x: 0.125rem;
.translate-y-0.5--transform-translate-y: 0.125rem;
.translate-x-1--transform-translate-x: 0.25rem;
.translate-y-1--transform-translate-y: 0.25rem;
.translate-x-1.5--transform-translate-x: 0.375rem;
.translate-y-1.5--transform-translate-y: 0.375rem;
.translate-x-2--transform-translate-x: 0.5rem;
.translate-y-2--transform-translate-y: 0.5rem;
.translate-x-2.5--transform-translate-x: 0.625rem;
.translate-y-2.5--transform-translate-y: 0.625rem;
.translate-x-3--transform-translate-x: 0.75rem;
.translate-y-3--transform-translate-y: 0.75rem;
.translate-x-3.5--transform-translate-x: 0.875rem;
.translate-y-3.5--transform-translate-y: 0.875rem;
.translate-x-4--transform-translate-x: 1rem;
.translate-y-4--transform-translate-y: 1rem;
.translate-x-4.5--transform-translate-x: 1.125rem;
.translate-y-4.5--transform-translate-y: 1.125rem;
.translate-x-5--transform-translate-x: 1.25rem;
.translate-y-5--transform-translate-y: 1.25rem;
.translate-x-6--transform-translate-x: 1.5rem;
.translate-y-6--transform-translate-y: 1.5rem;
.translate-x-7--transform-translate-x: 1.75rem;
.translate-y-7--transform-translate-y: 1.75rem;
.translate-x-8--transform-translate-x: 2rem;
.translate-y-8--transform-translate-y: 2rem;
.translate-x-9--transform-translate-x: 2.25rem;
.translate-y-9--transform-translate-y: 2.25rem;
.translate-x-10--transform-translate-x: 2.5rem;
.translate-y-10--transform-translate-y: 2.5rem;
.translate-x-11--transform-translate-x: 2.75rem;
.translate-y-11--transform-translate-y: 2.75rem;
.translate-x-12--transform-translate-x: 3rem;
.translate-y-12--transform-translate-y: 3rem;
.translate-x-13--transform-translate-x: 3.25rem;
.translate-y-13--transform-translate-y: 3.25rem;
.translate-x-14--transform-translate-x: 3.5rem;
.translate-y-14--transform-translate-y: 3.5rem;
.translate-x-15--transform-translate-x: 3.75rem;
.translate-y-15--transform-translate-y: 3.75rem;
.translate-x-16--transform-translate-x: 4rem;
.translate-y-16--transform-translate-y: 4rem;
.translate-x-18--transform-translate-x: 4.5rem;
.translate-y-18--transform-translate-y: 4.5rem;
.translate-x-20--transform-translate-x: 5rem;
.translate-y-20--transform-translate-y: 5rem;
.translate-x-24--transform-translate-x: 6rem;
.translate-y-24--transform-translate-y: 6rem;
.translate-x-28--transform-translate-x: 7rem;
.translate-y-28--transform-translate-y: 7rem;
.translate-x-32--transform-translate-x: 8rem;
.translate-y-32--transform-translate-y: 8rem;
.translate-x-36--transform-translate-x: 9rem;
.translate-y-36--transform-translate-y: 9rem;
.translate-x-40--transform-translate-x: 10rem;
.translate-y-40--transform-translate-y: 10rem;
.translate-x-48--transform-translate-x: 12rem;
.translate-y-48--transform-translate-y: 12rem;
.translate-x-56--transform-translate-x: 14rem;
.translate-y-56--transform-translate-y: 14rem;
.translate-x-60--transform-translate-x: 15rem;
.translate-y-60--transform-translate-y: 15rem;
.translate-x-64--transform-translate-x: 16rem;
.translate-y-64--transform-translate-y: 16rem;
.translate-x-72--transform-translate-x: 18rem;
.translate-y-72--transform-translate-y: 18rem;
.translate-x-80--transform-translate-x: 20rem;
.translate-y-80--transform-translate-y: 20rem;
.translate-x-96--transform-translate-x: 24rem;
.translate-y-96--transform-translate-y: 24rem;
.translate-x-1/2--transform-translate-x: 50%;
.translate-y-1/2--transform-translate-y: 50%;
.translate-x-1/3--transform-translate-x: 33.333333%;
.translate-y-1/3--transform-translate-y: 33.333333%;
.translate-x-2/3--transform-translate-x: 66.666667%;
.translate-y-2/3--transform-translate-y: 66.666667%;
.translate-x-1/4--transform-translate-x: 25%;
.translate-y-1/4--transform-translate-y: 25%;
.translate-x-2/4--transform-translate-x: 50%;
.translate-y-2/4--transform-translate-y: 50%;
.translate-x-3/4--transform-translate-x: 75%;
.translate-y-3/4--transform-translate-y: 75%;
.translate-x-full--transform-translate-x: 100%;
.translate-y-full--transform-translate-y: 100%;
.-translate-x-0--transform-translate-x: -0;
.-translate-y-0--transform-translate-y: -0;
.-translate-x-px--transform-translate-x: -1px;
.-translate-y-px--transform-translate-y: -1px;
.-translate-x-0.5--transform-translate-x: -0.125rem;
.-translate-y-0.5--transform-translate-y: -0.125rem;
.-translate-x-1--transform-translate-x: -0.25rem;
.-translate-y-1--transform-translate-y: -0.25rem;
.-translate-x-1.5--transform-translate-x: -0.375rem;
.-translate-y-1.5--transform-translate-y: -0.375rem;
.-translate-x-2--transform-translate-x: -0.5rem;
.-translate-y-2--transform-translate-y: -0.5rem;
.-translate-x-2.5--transform-translate-x: -0.625rem;
.-translate-y-2.5--transform-translate-y: -0.625rem;
.-translate-x-3--transform-translate-x: -0.75rem;
.-translate-y-3--transform-translate-y: -0.75rem;
.-translate-x-3.5--transform-translate-x: -0.875rem;
.-translate-y-3.5--transform-translate-y: -0.875rem;
.-translate-x-4--transform-translate-x: -1rem;
.-translate-y-4--transform-translate-y: -1rem;
.-translate-x-4.5--transform-translate-x: -1.125rem;
.-translate-y-4.5--transform-translate-y: -1.125rem;
.-translate-x-5--transform-translate-x: -1.25rem;
.-translate-y-5--transform-translate-y: -1.25rem;
.-translate-x-6--transform-translate-x: -1.5rem;
.-translate-y-6--transform-translate-y: -1.5rem;
.-translate-x-7--transform-translate-x: -1.75rem;
.-translate-y-7--transform-translate-y: -1.75rem;
.-translate-x-8--transform-translate-x: -2rem;
.-translate-y-8--transform-translate-y: -2rem;
.-translate-x-9--transform-translate-x: -2.25rem;
.-translate-y-9--transform-translate-y: -2.25rem;
.-translate-x-10--transform-translate-x: -2.5rem;
.-translate-y-10--transform-translate-y: -2.5rem;
.-translate-x-11--transform-translate-x: -2.75rem;
.-translate-y-11--transform-translate-y: -2.75rem;
.-translate-x-12--transform-translate-x: -3rem;
.-translate-y-12--transform-translate-y: -3rem;
.-translate-x-13--transform-translate-x: -3.25rem;
.-translate-y-13--transform-translate-y: -3.25rem;
.-translate-x-14--transform-translate-x: -3.5rem;
.-translate-y-14--transform-translate-y: -3.5rem;
.-translate-x-15--transform-translate-x: -3.75rem;
.-translate-y-15--transform-translate-y: -3.75rem;
.-translate-x-16--transform-translate-x: -4rem;
.-translate-y-16--transform-translate-y: -4rem;
.-translate-x-18--transform-translate-x: -4.5rem;
.-translate-y-18--transform-translate-y: -4.5rem;
.-translate-x-20--transform-translate-x: -5rem;
.-translate-y-20--transform-translate-y: -5rem;
.-translate-x-24--transform-translate-x: -6rem;
.-translate-y-24--transform-translate-y: -6rem;
.-translate-x-28--transform-translate-x: -7rem;
.-translate-y-28--transform-translate-y: -7rem;
.-translate-x-32--transform-translate-x: -8rem;
.-translate-y-32--transform-translate-y: -8rem;
.-translate-x-36--transform-translate-x: -9rem;
.-translate-y-36--transform-translate-y: -9rem;
.-translate-x-40--transform-translate-x: -10rem;
.-translate-y-40--transform-translate-y: -10rem;
.-translate-x-48--transform-translate-x: -12rem;
.-translate-y-48--transform-translate-y: -12rem;
.-translate-x-56--transform-translate-x: -14rem;
.-translate-y-56--transform-translate-y: -14rem;
.-translate-x-60--transform-translate-x: -15rem;
.-translate-y-60--transform-translate-y: -15rem;
.-translate-x-64--transform-translate-x: -16rem;
.-translate-y-64--transform-translate-y: -16rem;
.-translate-x-72--transform-translate-x: -18rem;
.-translate-y-72--transform-translate-y: -18rem;
.-translate-x-80--transform-translate-x: -20rem;
.-translate-y-80--transform-translate-y: -20rem;
.-translate-x-96--transform-translate-x: -24rem;
.-translate-y-96--transform-translate-y: -24rem;
.-translate-x-1/2--transform-translate-x: -50%;
.-translate-y-1/2--transform-translate-y: -50%;
.-translate-x-1/3--transform-translate-x: -33.333333%;
.-translate-y-1/3--transform-translate-y: -33.333333%;
.-translate-x-2/3--transform-translate-x: -66.666667%;
.-translate-y-2/3--transform-translate-y: -66.666667%;
.-translate-x-1/4--transform-translate-x: -25%;
.-translate-y-1/4--transform-translate-y: -25%;
.-translate-x-2/4--transform-translate-x: -50%;
.-translate-y-2/4--transform-translate-y: -50%;
.-translate-x-3/4--transform-translate-x: -75%;
.-translate-y-3/4--transform-translate-y: -75%;
.-translate-x-full--transform-translate-x: -100%;
.-translate-y-full--transform-translate-y: -100%;

Usage

Translate an element by first enabling transforms with the transform utility, then specifying the translate direction and distance using the translate-x-{amount} and translate-y-{amount} utilities.

<img class="transform translate-y-6 ...">
<img class="transform -translate-y-6 ...">
<img class="transform translate-y-0 ...">

Note that because Elements implements transforms using CSS custom properties, the transform utilities are not supported in older browsers like IE11.

Responsive

To control the translation of an element at a specific breakpoint, add a {screen}: prefix to any existing translate utility. For example, use md:translate-x-8 to apply the translate-x-8 utility at only medium screen sizes and above.

<img class="transform translate-x-2 md:translate-x-8 ...">

For more information about Elements’ responsive design features, check out the Responsive Design documentation.