Chapter 3.3☕ 15 min read

Transforms

Rotate, scale, skew, translate — modify elements in 2D and 3D space without affecting layout.

01Understanding Transforms

The transform property modifies the coordinate space of an element. You can rotate, scale, skew, or translate elements without affecting the document flow.

🕌

Analogy: Just like the minarets of Charminar stand tall and transformed, CSS transforms let you change an element's appearance without moving other elements.

/* Basic transform functions */
.box { transform: rotate(45deg); }       /* Rotation */
.box { transform: scale(1.5); }          /* Scale up 50% */
.box { transform: translateX(50px); }     /* Move right 50px */
.box { transform: skew(10deg); }          /* Skew by 10 degrees */

02Transform Functions

CSS provides these transform functions:

FunctionDescription

rotate(angle)Rotates clockwise. Negative = counter-clockwise. deg, rad, turn units.

scale(x, y)Scales width (x) and height (y). 1 = normal, 2 = double.

scaleX(n)Scales horizontally only.

scaleY(n)Scales vertically only.

skew(x, y)Skews along X and Y axes. Useful for ribbon effects.

translate(x, y)Moves from current position. Doesn't affect layout.

translateX(n)Moves horizontally. Perfect for animation.

translateY(n)Moves vertically. Perfect for animation.

03Transform Properties

transform-origin changes the point from which the transformation happens:

/* Default is center (50% 50%) */
.box { transform: rotate(45deg); }               /* Rotates from center */
.box { transform-origin: top left; transform: rotate(45deg); }  /* Rotates from top-left corner */
.box { transform-origin: 0 100%; transform: rotate(45deg); }    /* Rotates from bottom-left */

/* Multiple transforms — space separated */
.box { transform: rotate(30deg) scale(1.2) translateX(20px); }

/* 3D transforms — add perspective for depth */
.perspective { perspective: 1000px; }
.card { transform: rotateY(45deg); transform-style: preserve-3d; }

04Practical Examples

Common transform patterns:

/* Perfect centering with transform */
.centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Hover rotate */
.card { transition: transform 0.3s ease; }
.card:hover { transform: rotate(10deg); }

/* Scale on click */
.btn:active { transform: scale(0.95); }

/* 3D card flip */
.card { transform-style: preserve-3d; transition: transform 0.6s; }
.card.flipped { transform: rotateY(180deg); }

/* Image hover zoom */
.img { overflow: hidden; }
.img img { transition: transform 0.3s ease; }
.img:hover img { transform: scale(1.15); }

05Exercise — Transforms

Practice transforms below.

Try these experiments:

Rotate a box rotate(45deg) — see how it doesn't affect other elements Use scale(1.5) on hover with a transition Combine: transform: rotate(10deg) scale(1.1) Change transform-origin: top left — rotation point changes Use translate(-50%, -50%) for perfect centering of an absolute element

Done — Key Points:

✅ transform modifies element without affecting document flow. No layout shifts!
✅ Functions: rotate, scale, skew, translate — can be combined (space separated).
✅ transform-origin changes the transformation point (default: center).
✅ translate(-50%, -50%) + position absolute = perfect centering.
✅ 3D transforms need perspective on parent and transform-style: preserve-3d on element.

Previous3.2 — Transitions 📋 All Chapters Next Chapter3.4 — Animations & Keyframes →