Transform — Scale

vel-src: transitions.css

Utilities for scaling elements.

Class	Properties
vel-scale-0	transform: scale(0)
vel-scale-50	transform: scale(0.5)
vel-scale-75	transform: scale(0.75)
vel-scale-90	transform: scale(0.9)
vel-scale-95	transform: scale(0.95)
vel-scale-100	transform: scale(1)
vel-scale-105	transform: scale(1.05)
vel-scale-110	transform: scale(1.1)
vel-scale-125	transform: scale(1.25)
vel-scale-150	transform: scale(1.5)
vel-scale-x-0	transform: scaleX(0)
vel-scale-x-50	transform: scaleX(0.5)
vel-scale-x-100	transform: scaleX(1)
vel-scale-y-0	transform: scaleY(0)
vel-scale-y-100	transform: 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>