Tailwind Transforms and Filters
Transforms move, resize, turn, and tilt an element without changing the space it occupies in the page. Filters change how an element looks, much like the editing tools in a photo app. Together they create lively hover effects, image treatments, and subtle interface motion.
Scale
Scale changes the size of an element from its center. A value of 100 keeps the original size. A value of 110 grows the element by ten percent. A value of 50 shrinks it to half.
scale-50 ▪ half size
scale-100 ■ normal
scale-125 ⬛ larger
<img class="scale-100 hover:scale-110" src="photo.jpg" alt="Product photo">
Neighboring elements stay in place when an element scales, because a transform does not alter the layout.
Rotate
Rotate turns an element by a number of degrees. Positive numbers turn it clockwise. Add a minus sign for the opposite direction.
rotate-0 ┌──┐
rotate-45 ◇ diamond shape
rotate-90 turned sideways
-rotate-6 slight tilt to the left
Translate
Translate slides an element along the horizontal or vertical axis. The number follows the spacing scale, so translate-x-4 moves an element 16 pixels to the right. Fractions such as -translate-y-1/2 move an element by a share of its own height.
Centering With Translate
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
Centered box
</div>
left-1/2 top-1/2 puts the top-left corner at the center.
The negative translate pulls the box back by half its own size.
Skew and Origin
Skew slants an element like italic text. The class skew-x-6 tilts the top edge sideways. The origin classes choose the pivot point for scale and rotate. The default pivot sits at the center.
origin-center pivot in the middle
origin-top-left pivot at the top-left corner
origin-bottom pivot at the bottom edge
Version 4 applies scale, rotate, and translate as separate CSS properties. Each class works alone without a base transform class.
Smooth Motion
A transform jumps instantly unless a transition runs beside it. Add transition and a duration to animate the change.
<button class="transition duration-200 hover:-translate-y-1 hover:scale-105">
Lift on hover
</button>
Filters
Filters process the pixels of an element after it draws. Each filter class takes a step value.
Class Effect
──────────────────────────────────────────
blur-sm soft focus
grayscale removes color
sepia warm old-photo tint
brightness-125 lighter image
contrast-125 stronger difference between light and dark
saturate-150 richer colors
hue-rotate-90 shifts every color around the wheel
invert flips light and dark
drop-shadow-lg shadow that follows the shape outline
Version 4 moved the small sizes down one step. The old blur-sm is now blur-xs, and the old blur is now blur-sm. The same shift applies to drop-shadow.
Backdrop Filters
Backdrop filters affect whatever sits behind an element instead of the element itself. The class backdrop-blur-md blurs the background of a see-through header, creating a frosted look.
<header class="sticky top-0 bg-white/60 backdrop-blur-md">Site menu</header>
Gallery Example
A photo grid can show images in black and white, then reveal full color on hover.
<img class="grayscale transition duration-300 hover:grayscale-0 hover:scale-105" src="team.jpg" alt="Team photo">
Idle: ▒▒▒▒ gray image
Hover: ████ full color, slightly larger
Combining Effects
Several transform and filter classes can sit on one element. Each class changes one property, and the browser applies them together. A card might lift with hover:-translate-y-2, grow with hover:scale-105, and brighten with hover:brightness-110. Keep combinations simple. Two effects feel polished, while five effects feel noisy and distract from the content.
Idle card Hovered card
┌────────────┐ ┌──────────────┐ ← larger
│ │ → │ │ ← lifted
└────────────┘ └──────────────┘ ← brighter
Transforms and Layout
A transformed element keeps its original footprint. A scaled card still reserves the old amount of space, so a growing card may overlap its neighbors. Add a little gap between items and a higher z-index on hover, such as hover:z-10, so the enlarged card sits on top instead of hiding behind a neighbor.
Performance and Comfort
Transforms run on the graphics processor in most browsers, so they animate smoothly. Large blur values and many backdrop filters demand more power, especially on older phones. Use them on a few key elements instead of dozens.
Some visitors prefer reduced motion. Wrap lively effects with the motion-safe: variant, such as motion-safe:hover:scale-110, so the effect only plays for visitors who have not asked for calmer pages.
- Keep scale changes small, between 105 and 110, for a polished feel.
- Pair every hover transform with a keyboard focus style.
- Test filters on real photos, because results vary with image colors.