Translate
Utilities for translating an element on all three axis.
| Class | Properties |
| translate-x-0 | transform: translateX(0rem); |
| translate-y-0 | transform: translateY(0rem); |
| translate-z-0 | transform: translateZ(0rem); |
| translate-x-px | transform: translateX(1px); |
| translate-y-px | transform: translateY(1px); |
| translate-z-px | transform: translateZ(1px); |
| translate-x-0.5 | transform: translateX(0.125rem); |
| translate-y-0.5 | transform: translateY(0.125rem); |
| translate-z-0.5 | transform: translateZ(0.125rem); |
| translate-x-1 | transform: translateX(0.25rem); |
| translate-y-1 | transform: translateY(0.25rem); |
| translate-z-1 | transform: translateZ(0.25rem); |
| translate-x-1.5 | transform: translateX(0.375rem); |
| translate-y-1.5 | transform: translateY(0.375rem); |
| translate-z-1.5 | transform: translateZ(0.375rem); |
| translate-x-2 | transform: translateX(0.5rem); |
| translate-y-2 | transform: translateY(0.5rem); |
| translate-z-2 | transform: translateZ(0.5rem); |
| translate-x-2.5 | transform: translateX(0.625rem); |
| translate-y-2.5 | transform: translateY(0.625rem); |
| translate-z-2.5 | transform: translateZ(0.625rem); |
| translate-x-3 | transform: translateX(0.75rem); |
| translate-y-3 | transform: translateY(0.75rem); |
| translate-z-3 | transform: translateZ(0.75rem); |
| translate-x-3.5 | transform: translateX(0.875rem); |
| translate-y-3.5 | transform: translateY(0.875rem); |
| translate-z-3.5 | transform: translateZ(0.875rem); |
| translate-x-4 | transform: translateX(1rem); |
| translate-y-4 | transform: translateY(1rem); |
| translate-z-4 | transform: translateZ(1rem); |
| translate-x-5 | transform: translateX(1.25rem); |
| translate-y-5 | transform: translateY(1.25rem); |
| translate-z-5 | transform: translateZ(1.25rem); |
| translate-x-6 | transform: translateX(1.5rem); |
| translate-y-6 | transform: translateY(1.5rem); |
| translate-z-6 | transform: translateZ(1.5rem); |
| translate-x-7 | transform: translateX(1.75rem); |
| translate-y-7 | transform: translateY(1.75rem); |
| translate-z-7 | transform: translateZ(1.75rem); |
| translate-x-8 | transform: translateX(2.0rem); |
| translate-y-8 | transform: translateY(2.0rem); |
| translate-z-8 | transform: translateZ(2.0rem); |
| translate-x-9 | transform: translateX(2.25rem); |
| translate-y-9 | transform: translateY(2.25rem); |
| translate-z-9 | transform: translateZ(2.25rem); |
| translate-x-10 | transform: translateX(2.5rem); |
| translate-y-10 | transform: translateY(2.5rem); |
| translate-z-10 | transform: translateZ(2.5rem); |
| translate-x-11 | transform: translateX(2.75rem); |
| translate-y-11 | transform: translateY(2.75rem); |
| translate-z-11 | transform: translateZ(2.75rem); |
| translate-x-12 | transform: translateX(3.0rem); |
| translate-y-12 | transform: translateY(3.0rem); |
| translate-z-12 | transform: translateZ(3.0rem); |
| translate-x-14 | transform: translateX(3.5rem); |
| translate-y-14 | transform: translateY(3.5rem); |
| translate-z-14 | transform: translateZ(3.5rem); |
| translate-x-16 | transform: translateX(4.0rem); |
| translate-y-16 | transform: translateY(4.0rem); |
| translate-z-16 | transform: translateZ(4.0rem); |
| translate-x-20 | transform: translateX(5.0rem); |
| translate-y-20 | transform: translateY(5.0rem); |
| translate-z-20 | transform: translateZ(5.0rem); |
| translate-x-24 | transform: translateX(6.0rem); |
| translate-y-24 | transform: translateY(6.0rem); |
| translate-z-24 | transform: translateZ(6.0rem); |
| translate-x-28 | transform: translateX(7.0rem); |
| translate-y-28 | transform: translateY(7.0rem); |
| translate-z-28 | transform: translateZ(7.0rem); |
| translate-x-32 | transform: translateX(8.0rem); |
| translate-y-32 | transform: translateY(8.0rem); |
| translate-z-32 | transform: translateZ(8.0rem); |
| translate-x-36 | transform: translateX(9.0rem); |
| translate-y-36 | transform: translateY(9.0rem); |
| translate-z-36 | transform: translateZ(9.0rem); |
| translate-x-40 | transform: translateX(10.0rem); |
| translate-y-40 | transform: translateY(10.0rem); |
| translate-z-40 | transform: translateZ(10.0rem); |
| translate-x-44 | transform: translateX(11.0rem); |
| translate-y-44 | transform: translateY(11.0rem); |
| translate-z-44 | transform: translateZ(11.0rem); |
| translate-x-48 | transform: translateX(12.0rem); |
| translate-y-48 | transform: translateY(12.0rem); |
| translate-z-48 | transform: translateZ(12.0rem); |
| translate-x-52 | transform: translateX(13.0rem); |
| translate-y-52 | transform: translateY(13.0rem); |
| translate-z-52 | transform: translateZ(13.0rem); |
| translate-x-56 | transform: translateX(14.0rem); |
| translate-y-56 | transform: translateY(14.0rem); |
| translate-z-56 | transform: translateZ(14.0rem); |
| translate-x-60 | transform: translateX(15.0rem); |
| translate-y-60 | transform: translateY(15.0rem); |
| translate-z-60 | transform: translateZ(15.0rem); |
| translate-x-64 | transform: translateX(16.0rem); |
| translate-y-64 | transform: translateY(16.0rem); |
| translate-z-64 | transform: translateZ(16.0rem); |
| translate-x-72 | transform: translateX(18.0rem); |
| translate-y-72 | transform: translateY(18.0rem); |
| translate-z-72 | transform: translateZ(18.0rem); |
| translate-x-80 | transform: translateX(20.0rem); |
| translate-y-80 | transform: translateY(20.0rem); |
| translate-z-80 | transform: translateZ(20.0rem); |
| translate-x-96 | transform: translateX(24.0rem); |
| translate-y-96 | transform: translateY(24.0rem); |
| translate-z-96 | transform: translateZ(24.0rem); |
| translate-x-1/2 | transform: translateX(50%); |
| translate-y-1/2 | transform: translateY(50%); |
| translate-z-1/2 | transform: translateZ(50%); |
| translate-x-1/3 | transform: translateX(33.333%); |
| translate-y-1/3 | transform: translateY(33.333%); |
| translate-z-1/3 | transform: translateZ(33.333%); |
| translate-x-2/3 | transform: translateX(66.666%); |
| translate-y-2/3 | transform: translateY(66.666%); |
| translate-z-2/3 | transform: translateZ(66.666%); |
| translate-x-1/4 | transform: translateX(25%); |
| translate-y-1/4 | transform: translateY(25%); |
| translate-z-1/4 | transform: translateZ(25%); |
| translate-x-2/4 | transform: translateX(50%); |
| translate-y-2/4 | transform: translateY(50%); |
| translate-z-2/4 | transform: translateZ(50%); |
| translate-x-3/4 | transform: translateX(75%); |
| translate-y-3/4 | transform: translateY(75%); |
| translate-z-3/4 | transform: translateZ(75%); |
| translate-x-full | transform: translateX(100%); |
| translate-y-full | transform: translateY(100%); |
| translate-z-full | transform: translateZ(100%); |
| translate-3d-value | transform: translate3d(value, value, value); |
Basic Usage
You can translate on all axes using different translate classes provided. Default translate values are supported. For instance to translate 4rem on x axis and 20px on y axis, you can use,
<div class="transform tranlate-x-20 translate-y-[20px]"><!--Some Content--></div>
This is another example using tailwind defaults,
<div class="perspective-1200">
<div class="transform translate-x-1/2 -translate-y-24 translate-z-12">My element</div>
</div>
Remember to add transform class
Plugin requires you to add transform class along with other transform classes to apply the effect.
For example, instead of translate-y-20, use transform translate-y-20.
Read more on this here.
No transforms
translate-x-10
translate-y-16
translate-y-16
translate-x-10
translate-y-16
translate-z-10
translate-y-16
translate-z-10
Applying different classes for translate
<div class="flex space-x-10">
<div class="w-52 h-52">
<div class="w-20 h-20">
</div>
</div>
<div class="w-52 h-52">
<div class="w-20 h-20 transform translate-x-10 translate-y-16">
</div>
</div>
<div class="w-52 h-52 transform rotate-x-30">
<div class="w-20 h-20 transform translate-x-10 translate-y-16 translate-z-10">
</div>
</div>
</div>
Customizing Your Theme
We extend the default theme by adding additional values for translate key. You can add any custom values from tailwind.config.js file.
module.exports = {
theme: {
extend: {
translate: {
'4.25': '18rem',
}
}
}
}
Arbitrary Values
If you need to use an custom value for translate, you can use the following syntax.
<div class="translate-x-[250px]">
<!-- More Items -->
</div>
Learn more about arbitrary value support in the tailwindcss arbitrary values documentation.
Read More
To learn more about css translate transform refer here.
info
You can use modifiers such as md:translate-x-60 to target media queries, hover, active... etc. You can read about modifiers here.