Transforms

Master CSS transforms — translate, rotate, scale, and skew to move and reshape elements in 2D and 3D.

Transforms

CSS transforms let you move, rotate, scale, and skew elements without affecting the document flow. Transforms are the foundation of CSS animation — almost every animation you'll build uses them.

The transform Property

.element {
    transform: translateX(100px);
}

Transforms change the visual rendering of an element without moving it in the document flow. Other elements around it are not affected.

Translate — Moving Elements

/* Move right 100px */
transform: translateX(100px);

/* Move down 50px */
transform: translateY(50px);

/* Move right 100px AND down 50px */
transform: translate(100px, 50px);

/* Center an element (classic trick) */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Rotate — Spinning Elements

/* Rotate 45 degrees clockwise */
transform: rotate(45deg);

/* Rotate counter-clockwise */
transform: rotate(-90deg);

/* Full rotation */
transform: rotate(360deg);

/* Rotate around X axis (3D tilt) */
transform: rotateX(45deg);

/* Rotate around Y axis (3D flip) */
transform: rotateY(180deg);

Scale — Resizing Elements

/* Scale up 1.5x (150%) */
transform: scale(1.5);

/* Scale down to 50% */
transform: scale(0.5);

/* Scale width and height independently */
transform: scale(2, 0.5);  /* 200% wide, 50% tall */

/* Horizontal only */
transform: scaleX(1.5);

/* Vertical only */
transform: scaleY(2);

Skew — Tilting Elements

/* Skew along X axis */
transform: skewX(15deg);

/* Skew along Y axis */
transform: skewY(10deg);

/* Both axes */
transform: skew(15deg, 10deg);

All Transform Functions

Function	What It Does	Example
`translateX()`	Move horizontally	`translateX(50px)`
`translateY()`	Move vertically	`translateY(-20px)`
`translate()`	Move in X and Y	`translate(50px, 20px)`
`rotate()`	Rotate 2D	`rotate(45deg)`
`rotateX()`	Rotate around X axis (3D)	`rotateX(180deg)`
`rotateY()`	Rotate around Y axis (3D)	`rotateY(180deg)`
`scale()`	Resize	`scale(1.5)`
`skewX()` / `skewY()`	Tilt element	`skewX(15deg)`

Combining Multiple Transforms

You can chain transforms in a single transform property — they apply right to left:

/* Translate, then rotate, then scale */
transform: translateX(100px) rotate(45deg) scale(1.2);

/* Order matters! These produce different results: */
transform: rotate(45deg) translateX(100px);
transform: translateX(100px) rotate(45deg);

Transform Origin

By default, transforms happen from the center of the element. Change this with transform-origin:

/* Default: center */
transform-origin: center;

/* Top-left corner */
transform-origin: top left;

/* Specific coordinates */
transform-origin: 0 0;       /* Same as top left */
transform-origin: 100% 100%; /* Bottom right */

/* Example: rotate from the top-left */
.door {
    transform-origin: left;
    transform: rotateY(45deg);
}

3D Transforms — Perspective

For 3D transforms to look realistic, add perspective to the parent element:

.parent {
    perspective: 800px;  /* Lower = more dramatic 3D effect */
}

.child {
    transform: rotateY(45deg);
}

Key Takeaways

Transforms change how elements look without affecting layout flow
Four types: translate (move), rotate (spin), scale (resize), skew (tilt)
Chain multiple transforms in one property — order matters
transform-origin changes the pivot point for transformations
Add perspective to a parent for realistic 3D effects
Transforms are GPU-accelerated — ideal for animation