Contents
Quick reference
| Class | Properties |
|---|---|
.translate-x-0 | transform: translateX(0px); |
.translate-x-px | transform: translateX(1px); |
.translate-x-1 | transform: translateX(0.25rem); |
.translate-x-2 | transform: translateX(0.5rem); |
.translate-x-3 | transform: translateX(0.75rem); |
.translate-x-4 | transform: translateX(1rem); |
.translate-x-5 | transform: translateX(1.25rem); |
.translate-x-6 | transform: translateX(1.5rem); |
.translate-x-7 | transform: translateX(1.75rem); |
.translate-x-8 | transform: translateX(2rem); |
.translate-x-9 | transform: translateX(2.25rem); |
.translate-x-10 | transform: translateX(2.5rem); |
.translate-x-11 | transform: translateX(2.75rem); |
.translate-x-12 | transform: translateX(3rem); |
.translate-x-14 | transform: translateX(3.5rem); |
.translate-x-16 | transform: translateX(4rem); |
.translate-x-20 | transform: translateX(5rem); |
.translate-y-0 | transform: translateY(0px); |
.translate-y-px | transform: translateY(1px); |
.translate-y-1 | transform: translateY(0.25rem); |
.translate-y-2 | transform: translateY(0.5rem); |
.translate-y-3 | transform: translateY(0.75rem); |
.translate-y-4 | transform: translateY(1rem); |
.translate-y-5 | transform: translateY(1.25rem); |
.translate-y-6 | transform: translateY(1.5rem); |
.translate-y-7 | transform: translateY(1.75rem); |
.translate-y-8 | transform: translateY(2rem); |
.translate-y-9 | transform: translateY(2.25rem); |
.translate-y-10 | transform: translateY(2.5rem); |
.translate-y-11 | transform: translateY(2.75rem); |
.translate-y-12 | transform: translateY(3rem); |
.translate-y-14 | transform: translateY(3.5rem); |
.translate-y-16 | transform: translateY(4rem); |
.translate-y-20 | transform: translateY(5rem); |
Basic usage
Translating an element
Use the translate-x-{amount} and translate-y-{amount} utilities to translate an element.
translate-y-6
-translate-y-6
translate-x-6
<img class="translate-y-6 ...">
<img class="-translate-y-6 ...">
<img class="translate-x-6 ...">
Using negative values
To use a negative translate value, prefix the class name with a dash to convert it to a negative value.
<img class="-translate-y-6 ...">
Removing transforms
To remove all of the transforms on an element at once, use the transform-none utility:
<div class="scale-75 translate-x-4 skew-y-3 transform-none">
<!-- ... -->
</div>
Hover state
The utility classes supports hover states, using the following format .translate-{x|y}-{amount}-hover. For example, use translate-y-12-hover to only apply the translate-y-12 utility on hover.
<div class="translate-y-12-hover">
<!-- ... -->
</div>
Edit this page on Github
Last updated on April 6, 2024