Class-translate
Utilities for rotating elements with transform.
Use the v-translate-* utilities to control the translate of an element.
You can use
the feat: custom feature if you want the translate to suit your needs.
Table list translates
| Class name | Properties |
|---|---|
v-translate-1 | transform: translate(10%); |
v-translate-2 | transform: translate(20%); |
v-translate-3 | transform: translate(30%); |
v-translate-4 | transform: translate(40%); |
v-translate-middle | transform: translate(50%); |
-v-translate-1 | transform: translate(-10%); |
-v-translate-2 | transform: translate(-20%); |
-v-translate-3 | transform: translate(-30%); |
-v-translate-4 | transform: translate(-40%); |
-v-translate-middle | transform: translate(-50%); |
-v-translateX-1 | transform: translateX(-10%); |
-v-translateX-2 | transform: translateX(-20%); |
-v-translateX-3 | transform: translateX(-30%); |
-v-translateX-4 | transform: translateX(-40%); |
-v-translateX-middle | transform: translateX(-50%); |
v-translateY-1 | transform: translateY(10%); |
v-translateY-2 | transform: translateY(20%); |
v-translateY-3 | transform: translateY(30%); |
v-translateY-4 | transform: translateY(40%); |
v-translateY-middle | transform: translateY(-50%); |
-v-translateY-1 | transform: translateY(-10%); |
-v-translateY-2 | transform: translateY(-20%); |
-v-translateY-3 | transform: translateY(-30%); |
-v-translateY-4 | transform: translateY(-40%); |
-v-translateY-middle | transform: translateY(-50%); |
v-translateZ-1 | transform: translateZ(10%); |
v-translateZ-2 | transform: translateZ(20%); |
v-translateZ-3 | transform: translateZ(30%); |
v-translateZ-4 | transform: translateZ(40%); |
v-translateZ-middle | transform: translateZ(-50%); |
-v-translateZ-1 | transform: translateZ(-10%); |
-v-translateZ-2 | transform: translateZ(-20%); |
-v-translateZ-3 | transform: translateZ(-30%); |
-v-translateZ-4 | transform: translateZ(-40%); |
-v-translateZ-middle | transform: translateZ(-50%); |
The table above presents several types of translates with different variants.
Example Code
index.html
<div class="v-translateX-2">
</div>