Effects
Transforms
Transform utilities visually move, scale, rotate or skew an element without affecting layout — perfect for hover effects.
Scale, rotate, translate
- scale-105 grows an element to 105%; scale-95 shrinks it.
- rotate-6 rotates by 6 degrees; -rotate-6 the other way.
- translate-x-2 / -translate-y-1 nudge position.
Example
<div class="max-w-xs bg-white p-6 rounded-xl shadow-md hover:scale-105 hover:-translate-y-1 hover:shadow-xl transition duration-300">
<h3 class="font-bold">Hover me</h3>
<p class="text-gray-500 text-sm mt-1">I lift and grow slightly.</p>
</div>ℹ️
Transforms do not change the space an element occupies, so neighbours will not shift when it scales.