Translate
Use the translate utilities to repositions an element in the horizontal and/or vertical directions.
|
Class
|
Properties
|
|---|---|
| translate-y-0 | |
| translate-y-1 | |
| translate-y-2 | |
| translate-y-3 | |
| translate-y-4 | |
| translate-y-5 | |
| translate-y-6 | |
| translate-y-7 | |
| translate-y-8 | |
| translate-y-10 | |
| translate-y-12 | |
| translate-y-16 | |
| translate-y-20 | |
| translate-y-24 | |
| translate-y-32 | |
| translate-y-40 | |
| translate-y-48 | |
| translate-y-56 | |
| translate-y-64 | |
| translate-y-px | |
| translate-y-full | |
| translate-x-0 | |
| translate-x-1 | |
| translate-x-2 | |
| translate-x-3 | |
| translate-x-4 | |
| translate-x-5 | |
| translate-x-6 | |
| translate-x-7 | |
| translate-x-8 | |
| translate-x-10 | |
| translate-x-12 | |
| translate-x-16 | |
| translate-x-20 | |
| translate-x-24 | |
| translate-x-32 | |
| translate-x-40 | |
| translate-x-48 | |
| translate-x-56 | |
| translate-x-64 | |
| translate-x-px | |
| translate-x-full |
Usage
Use the rotate utility classes to control the rotation an element around a fixed point.
<div class="d-flex">
<div class="transform translate-x-n10"></div>
<div class="transform translate-y-10"></div>
<div class="transform translate-x-1/2 translate-y-n1/2"></div>
</div>
Responsive
Responsive variations also exist for each translate value. Use the .translate-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing translate utility.
<div class="transform translate-1/2 translate-x-md-0 ..."></div>