CSS — 2D Transforms

Transform ≠ layout change

Transforms visually move elements without touching document flow — neighbors never shift:

.box {
    transform: translate(20px, -10px);   /* right 20px, up 10px */
}

That non-disturbing quality (plus GPU speed) is why transforms are the preferred animation property.

The four functions

transform: translateX(50px);     /* move horizontally        */
transform: translateY(-1rem);    /* move vertically          */
transform: translate(50px, 20%); /* both; % refers to itself! */

transform: scale(1.2);           /* 120% size, grows from center   */
transform: scaleX(0.5);          /* squash horizontally only       */

transform: rotate(45deg);        /* clockwise degrees              */
transform: rotate(-0.25turn);    /* turns also work                */

transform: skewX(10deg);         /* slant — use sparingly :)       */

translate percentages refer to the element's OWN size — handy for self-centering (-50%, -50%).

transform-origin

Rotation/scaling pivots around the center by default:

.door {
    transform-origin: left center;   /* hinge on the left edge */
}
.tab:hover { transform: rotate(3deg); }  /* wobble from top? */
.tab { transform-origin: top center; }

Values: keywords, px, %.

Combining — space-separated order matters

transform: translateX(100px) rotate(45deg) scale(1.5);

Functions apply right-to-left conceptually; rotate(45) translateX(100) moves along the rotated axis — a different destination than translate-first. When results confuse you, reorder.

The hover-lift recipe

The most-used transform on the internet:

.card {
    transition: transform 0.2s ease-out;
}
.card:hover {
    transform: translateY(-4px);
}

(Cards rise subtly on hover; nothing around them moves.)

Perfect-centering trick

.modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

Half its own size back from the 50% anchor — works for any dimensions.

Flip / mirror

.flip-horizontal { transform: scaleX(-1); }
.flip-vertical   { transform: scaleY(-1); }

Avatars, icons, mirrored game characters.

Pitfalls: transformed elements create stacking contexts (z-index surprise); they also become containing blocks for fixed-position children — a modal inside a transformed parent positions against THAT parent, not the viewport!

Mini Practice

1. Hover-lift cards with transition.
2. Center any-size box via absolute + translate(-50%,-50%).
3. Mirror an icon horizontally on [dir="rtl"].
4. Rotate a gear icon continuously (with animation next lesson).
5. Prove flow-unchanged: transform one card; neighbors stay put.
6. Demonstrate order-of-functions difference between two combined transforms.

Next: 3D transforms →