CSS transform Tutorial: rotate, scale, translate and skew

The CSS transform property moves, rotates, scales and skews elements without affecting the layout around them. That makes it the go-to property for animations and hover effects. Here’s the practical guide.

The four core functions

.box {
  transform: rotate(45deg);        /* spin */
  transform: scale(1.5);           /* grow/shrink */
  transform: translate(20px, 10px);/* move */
  transform: skew(10deg, 0);       /* slant */
}

You can use axis-specific versions too: rotateZ(), scaleX(), scaleY(), translateX(), translateY(), skewX(), skewY().

Key fact: transforms don’t affect layout

A transformed element still occupies its original space in the document. Surrounding elements don’t move. That’s why animating transform is smooth — the browser doesn’t recalculate layout for every frame.

This is the single biggest reason to prefer transform: translateX() over animating left.

Combining transforms

List multiple functions separated by spaces. They apply right-to-left:

transform: rotate(45deg) scale(2);

Here scale(2) happens first, then rotate(45deg). Swap the order and you get a different result — order matters because each transform redefines the coordinate system for the next.

transform-origin: the pivot point

By default, transforms pivot around the element’s center (50% 50%). Change it to rotate around a corner:

.box {
  transform-origin: top left;
  transform: rotate(15deg);
}

Useful for clock hands, fanning cards, and door-open effects.

Animating transforms

Transforms are among the cheapest properties to animate because they run on the compositor thread:

.btn {
  transition: transform 0.2s ease;
}
.btn:hover {
  transform: translateY(-3px) scale(1.03);
}

That tiny lift-and-grow is the classic “button feels clickable” effect.

Flipping elements

.mirror   { transform: scaleX(-1); } /* horizontal flip */
.upside   { transform: scaleY(-1); } /* vertical flip */

Handy for mirroring icons instead of exporting a second asset.

3D transforms (bonus)

Add perspective to the parent and use rotateX / rotateY for card flips and cube effects:

.scene { perspective: 800px; }
.card  { transition: transform 0.6s; transform-style: preserve-3d; }
.card:hover { transform: rotateY(180deg); }

Common use cases

• Button hover lift
• Card flip reveals
• Rotating loading icons
• Diagonal section dividers (skewY)
• Zoom-on-hover image galleries

Build it visually

Dialing in exact angles and scales by hand is fiddly. Use the CSS Transform Generator to drag sliders for rotate, scale, translate and skew with a live preview, then copy the transform declaration.