Docs / Transform — Scale

Transform — Scale

vel-src: transitions.css

Utilities for scaling elements.

ClassProperties
vel-scale-0transform: scale(0)
vel-scale-50transform: scale(0.5)
vel-scale-75transform: scale(0.75)
vel-scale-90transform: scale(0.9)
vel-scale-95transform: scale(0.95)
vel-scale-100transform: scale(1)
vel-scale-105transform: scale(1.05)
vel-scale-110transform: scale(1.1)
vel-scale-125transform: scale(1.25)
vel-scale-150transform: scale(1.5)
vel-scale-x-0transform: scaleX(0)
vel-scale-x-50transform: scaleX(0.5)
vel-scale-x-100transform: scaleX(1)
vel-scale-y-0transform: scaleY(0)
vel-scale-y-100transform: scaleY(1)

Examples

Scale on hover using transition + scale

Hover to scale up
example.html
<div class="vel-transition-transform vel-duration-200 vel-ease-out vel-hover:scale-110 vel-bg-primary vel-text-white vel-rounded-lg vel-inline-block vel-cursor-pointer" style="padding:1rem 2rem">
  Hover to scale up
</div>

Press effect with active:scale-95

example.html
<button class="vel-transition-transform vel-duration-100 vel-active:scale-95 vel-btn vel-btn-success">
  Click me
</button>