Translate
Below, utility classes to apply transform property.
for
$valuefrom 0 through 64
| Class | Properties |
|---|---|
.translate-x-<value> | transform: translateX(#{$value * 0.25}rem); |
.translate-y-<value> | transform: translateY(#{$value * 0.25}rem); |
| .translate-x-1/1 | transform: translateX(100%); |
| .translate-y-1/1 | transform: translateY(100%); |
| .translate-x-1/2 | transform: translateX(50%); |
| .translate-y-1/2 | transform: translateY(50%); |
| .translate-x-1/3 | transform: translateX(33.333%); |
| .translate-y-1/3 | transform: translateY(33.333%); |
| .translate-x-2/3 | transform: translateX(66.667%); |
| .translate-y-2/3 | transform: translateY(66.667%); |
| .translate-x-1/4 | transform: translateX(25%); |
| .translate-y-1/4 | transform: translateY(25%); |
| .translate-x-2/4 | transform: translateX(50%); |
| .translate-y-2/4 | transform: translateY(50%); |
| .translate-x-3/4 | transform: translateX(75%); |
| .translate-y-3/4 | transform: translateY(75%); |
| .translate-x-1/5 | transform: translateX(20%); |
| .translate-y-1/5 | transform: translateY(20%); |
| .translate-x-2/5 | transform: translateX(40%); |
| .translate-y-2/5 | transform: translateY(40%); |
| .translate-x-3/5 | transform: translateX(60%); |
| .translate-y-3/5 | transform: translateY(60%); |
| .translate-x-4/5 | transform: translateX(80%); |
| .translate-y-4/5 | transform: translateY(80%); |
| .translate-x-1/6 | transform: translateX(16.667%); |
| .translate-y-1/6 | transform: translateY(16.667%); |
| .translate-x-2/6 | transform: translateX(33.333%); |
| .translate-y-2/6 | transform: translateY(33.333%); |
| .translate-x-3/6 | transform: translateX(50%); |
| .translate-y-3/6 | transform: translateY(50%); |
| .translate-x-4/6 | transform: translateX(66.667%); |
| .translate-y-4/6 | transform: translateY(66.667%); |
| .translate-x-5/6 | transform: translateX(83.333%); |
| .translate-y-5/6 | transform: translateY(83.333%); |