Transform

CSS Transform Summary

The CSS transform property changes how an element is drawn without changing the space it occupies in the page layout. You can move, resize, rotate, or tilt an element.

.box {
	transform: rotate(10deg);
}

What Transform Does

A transform changes the visual appearance or position of an element. The browser still keeps the element’s original place in the layout.

This makes transforms useful for small visual adjustments, interactive effects, icons, cards, and other interface elements.

Move An Element With Translate

The translate functions move an element horizontally or vertically.

.box {
	transform: translateX(40px);
}

A positive translateX value moves the element to the right. A negative value moves it to the left.

.box {
	transform: translateY(-20px);
}

A negative translateY value moves the element upward. A positive value moves it downward.

Resize An Element With Scale

The scale function makes an element appear larger or smaller.

.box {
	transform: scale(1.25);
}

A value of 1 keeps the original size. A value greater than 1 enlarges the element. A value between 0 and 1 makes it smaller.

.box {
	transform: scale(0.75);
}

The element’s content, border, and background all scale together.

Turn An Element With Rotate

The rotate function turns an element around its center.

.box {
	transform: rotate(15deg);
}

Rotation is usually measured in degrees. Positive values rotate clockwise, while negative values rotate counterclockwise.

.box {
	transform: rotate(-8deg);
}

Combine Multiple Transforms

You can place multiple transform functions in the same declaration.

.box {
	transform: translateX(30px) rotate(8deg) scale(1.1);
}

The browser applies the functions in the order they are written. Changing the order can produce a different result.

All transform functions must be written in the same transform declaration. A later transform rule replaces an earlier one.

.box {
	transform: translateX(30px);
	transform: rotate(8deg);
}

In this example, only the rotation remains because the second declaration replaces the first.

Transforms Do Not Change The Layout

A transformed element keeps its original space in the document. Nearby elements do not move out of the way when it is translated, scaled, or rotated.

This can cause a transformed element to overlap other content. Use normal layout properties such as margin, padding, flexbox, or grid when nearby elements should also change position.

The CSS box model lesson explains how elements normally occupy space in a layout.

Change The Transform Origin

Transforms usually happen around the center of an element. The transform-origin property changes that starting point.

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

This rotates the element around its top-left corner instead of its center.

Use Transforms Without Hiding Content

Large translations, rotations, and scales can move content outside its container or place it over other elements. Test transformed elements at different screen widths and make sure important text and controls remain usable.

Transforms work best for visual effects and small adjustments. They should not replace the main page layout.