Transform — Translate

vel-src: transitions.css

Utilities for translating (moving) elements.

Class	Properties
vel-translate-x-0	transform: translateX(0px)
vel-translate-x-1	transform: translateX(0.25rem)
vel-translate-x-2	transform: translateX(0.5rem)
vel-translate-x-4	transform: translateX(1rem)
vel-translate-x-8	transform: translateX(2rem)
vel-translate-x-full	transform: translateX(100%)
-vel-translate-x-1	transform: translateX(-0.25rem)
-vel-translate-x-2	transform: translateX(-0.5rem)
-vel-translate-x-4	transform: translateX(-1rem)
-vel-translate-x-full	transform: translateX(-100%)
vel-translate-y-0	transform: translateY(0px)
vel-translate-y-1	transform: translateY(0.25rem)
vel-translate-y-2	transform: translateY(0.5rem)
vel-translate-y-4	transform: translateY(1rem)
vel-translate-y-8	transform: translateY(2rem)
vel-translate-y-full	transform: translateY(100%)
-vel-translate-y-1	transform: translateY(-0.25rem)
-vel-translate-y-2	transform: translateY(-0.5rem)
-vel-translate-y-4	transform: translateY(-1rem)
-vel-translate-y-full	transform: translateY(-100%)

Examples

Slide up on hover

Hover to lift

example.html

<div class="vel-transition-transform vel-duration-200 vel-ease-out vel-hover:-translate-y-2" style="display:inline-block;padding:1rem 1.5rem;background:#0d1422;border:1px solid #1e2d45;border-radius:0.5rem;color:#e2e8f0;cursor:pointer">
  Hover to lift
</div>

Centered absolute element using translate

Centered

example.html

<div style="position:relative;height:6rem;background:#060b17;border:1px solid #1e2d45;border-radius:0.5rem;overflow:hidden">
  <div class="vel-translate-x-full" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:0.5rem 1rem;background:#7c5cfc;color:#fff;border-radius:0.25rem">
    Centered
  </div>
</div>