The CSS3 transform property enables powerful 2D manipulations on elements, including translation, rotation, and scaling. These operations reposition and reshape elements within a two-dimensional coordinate system. Along the X-axis (horizontal, rightward positive) and Y-axis (vertical, downward positive), translate, rotate, and scale provide precise control over an element's geometry.

Translation

The translate function moves an element from its current position by specified distances along the X and Y axes:

transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);

Key characteristics:

• It does not affect the layout of other elements.
• Percentages are relative to the element's own width and height.
• Does not work on inline elements like <span>.

Centering a Box

A common use case is centering an absolutely positioned element within its parent:

.parent {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: pink;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-color: purple;
    transform: translate(-50%, -50%);
}

Rotation

The rotate function rotates an element around its origin (by default, the center):

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

Degrees (deg) are the unit. Positiev values rotate clockwise; negative values counter-clockwise.

Changing the Rotation Origin

Use transform-origin to set a different pivot point:

transform-origin: x y;
/* x and y can be: percentage, pixel, or keyword like top, left, center, bottom, right */

Example:

transform-origin: top left;
transform: rotate(45deg);

Scaling

The scale functoin enlarges or reduces an element's size:

transform: scale(2, 3);          /* width ×2, height ×3 */
transform: scale(2);             /* both axes ×2 (same as scale(2,2)) */
transform: scale(0.5, 0.5);      /* reduces to half */

• Values are multipliers (no unit).
• Scaling is relative to the element's center by default, and does not displace sibling elements.
• A single value applies to both axes.

Combining Transforms & Execution Order

When multiple transform functions are combined, the order matters because transformations are applied sequentially. For example, rotating first changes the coordinate axes, affecting subsequent translations:

transform: translate(200px, 0) rotate(360deg) scale(1.2);

Best practice: Place translate before rotate and scale to maintain predictable positioning.

Summary of 2D Transform Properties