Transforms
Translate Transform
Utilities for translate an element that has transform applied.
Variant
Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited
API
| class | css |
|---|---|
| translate-x-px | --transform-translate-x: 1px |
| translate-x-0 | --transform-translate-x: 0 |
| translate-x-1 | --transform-translate-x: 0.25rem |
| translate-x-2 | --transform-translate-x: 0.5rem |
| translate-x-3 | --transform-translate-x: 0.75rem |
| translate-x-4 | --transform-translate-x: 1rem |
| translate-x-5 | --transform-translate-x: 1.25rem |
| translate-x-6 | --transform-translate-x: 1.5rem |
| translate-x-8 | --transform-translate-x: 2rem |
| translate-x-10 | --transform-translate-x: 2.5rem |
| translate-x-12 | --transform-translate-x: 3rem |
| translate-x-16 | --transform-translate-x: 4rem |
| translate-x-20 | --transform-translate-x: 5rem |
| translate-x-24 | --transform-translate-x: 6rem |
| translate-x-32 | --transform-translate-x: 8rem |
| translate-x-40 | --transform-translate-x: 10rem |
| translate-x-48 | --transform-translate-x: 12rem |
| translate-x-56 | --transform-translate-x: 14rem |
| translate-x-64 | --transform-translate-x: 16rem |
| translate-x-1/2 | --transform-translate-x: 50% |
| translate-x-full | --transform-translate-x: 100% |
| -translate-x-px | --transform-translate-x: -1px |
| -translate-x-1 | --transform-translate-x: -0.25rem |
| -translate-x-2 | --transform-translate-x: -0.5rem |
| -translate-x-3 | --transform-translate-x: -0.75rem |
| -translate-x-4 | --transform-translate-x: -1rem |
| -translate-x-5 | --transform-translate-x: -1.25rem |
| -translate-x-6 | --transform-translate-x: -1.5rem |
| -translate-x-8 | --transform-translate-x: -2rem |
| -translate-x-10 | --transform-translate-x: -2.5rem |
| -translate-x-12 | --transform-translate-x: -3rem |
| -translate-x-16 | --transform-translate-x: -4rem |
| -translate-x-20 | --transform-translate-x: -5rem |
| -translate-x-24 | --transform-translate-x: -6rem |
| -translate-x-32 | --transform-translate-x: -8rem |
| -translate-x-40 | --transform-translate-x: -10rem |
| -translate-x-48 | --transform-translate-x: -12rem |
| -translate-x-56 | --transform-translate-x: -14rem |
| -translate-x-64 | --transform-translate-x: -16rem |
| -translate-x-1/2 | --transform-translate-x: -50% |
| -translate-x-full | --transform-translate-x: -100% |
| class | css |
|---|---|
| translate-y-px | --transform-translate-y: 1px |
| translate-y-0 | --transform-translate-y: 0 |
| translate-y-1 | --transform-translate-y: 0.25rem |
| translate-y-2 | --transform-translate-y: 0.5rem |
| translate-y-3 | --transform-translate-y: 0.75rem |
| translate-y-4 | --transform-translate-y: 1rem |
| translate-y-5 | --transform-translate-y: 1.25rem |
| translate-y-6 | --transform-translate-y: 1.5rem |
| translate-y-8 | --transform-translate-y: 2rem |
| translate-y-10 | --transform-translate-y: 2.5rem |
| translate-y-12 | --transform-translate-y: 3rem |
| translate-y-16 | --transform-translate-y: 4rem |
| translate-y-20 | --transform-translate-y: 5rem |
| translate-y-24 | --transform-translate-y: 6rem |
| translate-y-32 | --transform-translate-y: 8rem |
| translate-y-40 | --transform-translate-y: 10rem |
| translate-y-48 | --transform-translate-y: 12rem |
| translate-y-56 | --transform-translate-y: 14rem |
| translate-y-64 | --transform-translate-y: 16rem |
| translate-y-1/2 | --transform-translate-y: 50% |
| translate-y-full | --transform-translate-y: 100% |
| -translate-y-px | --transform-translate-y: -1px |
| -translate-y-1 | --transform-translate-y: -0.25rem |
| -translate-y-2 | --transform-translate-y: -0.5rem |
| -translate-y-3 | --transform-translate-y: -0.75rem |
| -translate-y-4 | --transform-translate-y: -1rem |
| -translate-y-5 | --transform-translate-y: -1.25rem |
| -translate-y-6 | --transform-translate-y: -1.5rem |
| -translate-y-8 | --transform-translate-y: -2rem |
| -translate-y-10 | --transform-translate-y: -2.5rem |
| -translate-y-12 | --transform-translate-y: -3rem |
| -translate-y-16 | --transform-translate-y: -4rem |
| -translate-y-20 | --transform-translate-y: -5rem |
| -translate-y-24 | --transform-translate-y: -6rem |
| -translate-y-32 | --transform-translate-y: -8rem |
| -translate-y-40 | --transform-translate-y: -10rem |
| -translate-y-48 | --transform-translate-y: -12rem |
| -translate-y-56 | --transform-translate-y: -14rem |
| -translate-y-64 | --transform-translate-y: -16rem |
| -translate-y-1/2 | --transform-translate-y: -50% |
| -translate-y-full | --transform-translate-y: -100% |
| class | css |
|---|---|
| translate-z-px | --transform-translate-z: 1px |
| translate-z-0 | --transform-translate-z: 0 |
| translate-z-1 | --transform-translate-z: 0.25rem |
| translate-z-2 | --transform-translate-z: 0.5rem |
| translate-z-3 | --transform-translate-z: 0.75rem |
| translate-z-4 | --transform-translate-z: 1rem |
| translate-z-5 | --transform-translate-z: 1.25rem |
| translate-z-6 | --transform-translate-z: 1.5rem |
| translate-z-8 | --transform-translate-z: 2rem |
| translate-z-1 | --transform-translate-z: 2.5rem |
| translate-z-12 | --transform-translate-z: 3rem |
| translate-z-16 | --transform-translate-z: 4rem |
| translate-z-2 | --transform-translate-z: 5rem |
| translate-z-24 | --transform-translate-z: 6rem |
| translate-z-32 | --transform-translate-z: 8rem |
| translate-z-4 | --transform-translate-z: 10rem |
| translate-z-48 | --transform-translate-z: 12rem |
| translate-z-56 | --transform-translate-z: 14rem |
| translate-z-64 | --transform-translate-z: 16rem |
| translate-z-1/2 | --transform-translate-z: 50% |
| translate-z-full | --transform-translate-z: 100% |
| -translate-z-px | --transform-translate-z: -1px |
| -translate-z-1 | --transform-translate-z: -0.25rem |
| -translate-z-2 | --transform-translate-z: -0.5rem |
| -translate-z-3 | --transform-translate-z: -0.75rem |
| -translate-z-4 | --transform-translate-z: -1rem |
| -translate-z-5 | --transform-translate-z: -1.25rem |
| -translate-z-6 | --transform-translate-z: -1.5rem |
| -translate-z-8 | --transform-translate-z: -2rem |
| -translate-z-1 | --transform-translate-z: -2.5rem |
| -translate-z-12 | --transform-translate-z: -3rem |
| -translate-z-16 | --transform-translate-z: -4rem |
| -translate-z-2 | --transform-translate-z: -5rem |
| -translate-z-24 | --transform-translate-z: -6rem |
| -translate-z-32 | --transform-translate-z: -8rem |
| -translate-z-4 | --transform-translate-z: -10rem |
| -translate-z-48 | --transform-translate-z: -12rem |
| -translate-z-56 | --transform-translate-z: -14rem |
| -translate-z-64 | --transform-translate-z: -16rem |
| -translate-z-1/2 | --transform-translate-z: -50% |
| -translate-z-full | --transform-translate-z: -100% |
Usage
Translate the element to x-axis.
Hover
translate-x-4
Hover
-translate-x-4
<div class="transform (hover)translate-x-4 ... height-32 width-32 ... bg-tint-granite-5">
...
</div>
HTML
.dummy {
@extend
.transform,
.(hover)translate-x-4,
.height-32,
.width-32,
.bg-tint-granite-5;
}
SCSS
Translate the element to y-axis.
Hover
translate-y-4
Hover
-translate-y-4
<div class="transform (hover)translate-y-4 ... height-32 width-32 ... bg-tint-granite-5">
...
</div>
HTML
.dummy {
@extend
.transform,
.(hover)translate-y-4,
.height-32,
.width-32,
.bg-tint-granite-5;
}
SCSS
Translate the element to z-axis with transform-perspective utilities.
Hover
translate-z-16
Hover
-translate-z-16
<div class="transform translate-z-0 (hover)translate-x-16 ... height-32 width-32 ... bg-tint-granite-2">
...
</div>
HTML
.dummy {
@extend
.transform,
.translate-z-0,
.(hover)translate-x-16,
.height-32,
.width-32,
.bg-tint-granite-2;
}
SCSS