CSS Transform Guide

What Is CSS Transform?

CSS transforms let you move, rotate, scale, and skew elements without affecting the document flow. The element stays in its original position for layout purposes — only its visual rendering changes.

This means you can animate a button hover, flip a card, or zoom an image without causing the rest of the page to reflow.

.card:hover {
  transform: scale(1.05);
}

2D Transform Functions

CSS provides five core 2D transform functions. Each one manipulates the element in a specific way.

translate — Move It

translate() shifts an element along the X and Y axes. You can specify one value (X only) or two (X and Y).

/* Move right 20px and down 10px */
transform: translate(20px, 10px);

/* Move right 50% of the element's own width */
transform: translateX(50%);

/* Move up 30px */
transform: translateY(-30px);

Using percentages in translate is relative to the element itself — not the parent. That makes translate(-50%, -50%) plus position: absolute a reliable way to center an element.

rotate — Spin It

rotate() turns an element around its center point. Positive values spin clockwise; negative values spin counter-clockwise.

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

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

Angles use deg, rad, grad, or turn units. A full rotation is 360deg, 2π rad, 400grad, or 1turn.

scale — Resize It

scale() changes the size of an element. Values below 1 shrink, above 1 grow, and 1 means no change.

/* Scale up 20% */
transform: scale(1.2);

/* Scale X 150%, Y 80% */
transform: scaleX(1.5) scaleY(0.8);

/* Flip horizontally */
transform: scaleX(-1);

A negative scale value mirrors the element along that axis — handy for flip animations.

skew — Tilt It

skew() slants an element along the X or Y axis, creating a parallelogram effect.

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

/* Skew both axes */
transform: skew(10deg, 5deg);

Skew transforms are uncommon in production UIs but useful for creative effects and decorative elements.

matrix — The Universal Function

Every 2D transform can be expressed as a single matrix() call with six parameters:

transform: matrix(a, b, c, d, tx, ty);

You rarely write matrix() by hand — browsers convert your transforms into it internally. But understanding it helps when reading computed styles in DevTools.

Order of Operations Matters

Transforms apply in the order you write them — and the result changes depending on that order.

/* Rotate first, then translate */
transform: rotate(45deg) translateX(100px);

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

In the first example, the element rotates in place, then moves 100px along the rotated X axis. In the second, it moves 100px along the original X axis, then rotates around its center at the new position.

Rule of thumb: Write transforms from inside out. The last function in the list applies first visually.

Combining Multiple Transforms

You can chain as many functions as needed in a single transform declaration:

.card:hover {
  transform: translateX(10px) rotate(3deg) scale(1.05);
}

Avoid setting transform in multiple rules that might override each other. Always combine your transforms in one declaration.

transform-origin

transform-origin sets the pivot point for all transform operations. The default value is center center (50% 50%), but you can shift it.

/* Rotate from top-left corner */
transform-origin: top left;
transform: rotate(45deg);

/* Scale from bottom center */
transform-origin: bottom center;
transform: scale(1.5);

Changing transform-origin is critical for realistic animations. A door swings from its hinge — not its center. A card flips from its left edge — not its midpoint.

3D Transforms (Brief Overview)

CSS also supports 3D transforms with perspective, rotateX, rotateY, rotateZ, translateZ, and scaleZ.

/* Enable 3D context on parent */
.card-container {
  perspective: 800px;
}

/* Flip card on hover */
.card:hover {
  transform: rotateY(180deg);
  transition: transform 0.6s;
}

Setting perspective on the parent creates depth — elements farther from the viewer appear smaller. Without it, 3D transforms project flat onto the screen.

Browser Support

CSS 2D transforms enjoy universal support across all modern browsers. 3D transforms are equally well-supported.

The newer individual transform properties (translate, rotate, scale as standalone CSS properties) simplify code and improve animation performance but lack support in older browsers.

/* Individual properties (modern) */
translate: 20px 10px;
rotate: 45deg;
scale: 1.2;

/* Shorthand (universal) */
transform: translate(20px, 10px) rotate(45deg) scale(1.2);

Key Takeaways

• CSS transforms change visual rendering without affecting document flow
• translate moves, rotate spins, scale resizes, skew tilts — each has X/Y variants
• Transform order matters: rotate then translate ≠ translate then rotate
• transform-origin controls the pivot point — default is center, but custom origins create more natural animations
• 3D transforms require perspective on the parent for realistic depth
• Individual transform properties offer cleaner syntax but need fallbacks for older browsers

Try It Yourself

Build and preview CSS transforms interactively with our CSS Transform Tool. Adjust rotate, scale, translate, and skew values and copy the generated code straight into your project.

Related Guides

• CSS Visual Effects — Combine transforms with filters and blend modes for rich visual treatments
• CSS Animation Tools — Turn transforms into smooth animations with transitions and keyframes