Transform

transform

transform moves, rotates, scales and skews an element. List several functions separated by spaces and they combine in order.

Syntax

none | <transform-list>

<transform-list> = <transform-function>+

Preview

Presets

Drag the bottom-right corner to resize

Code

.box {
  background: linear-gradient(
    135deg,
    #88d1c7,
    #77a7d7,
    #eaac3a
  );
  border-radius: 8px 32px;
  transform: translateX(40px) rotate(15deg);
}

Controls

translateX(40px)

<length-percentage>

rotate(15deg)

<angle>

Add a function

About

The functions

translate() moves the element. Percentages are relative to the element’s own size, not its parent. Leaving out the second value (y) means 0.
rotate() rotates; positive angles turn clockwise.
scale() resizes. 1 (100%) leaves it as is, and negative values flip it. Leaving out the second value repeats the first.
skew() slants the element. Leaving out the second value means 0.
Functions ending in X or Y, such as translateX(), work along one axis only.

Order matters

Functions apply from left to right, each one changing the direction and scale for the next. Rotate first and a later move goes in the rotated direction. Compare the “Move, then rotate” and “Rotate, then move” presets, or reorder the cards in the controls.

Layout stays put

A transformed element keeps its place in the layout, and its neighbors don’t move. The dashed outline in the preview shows where the element was before the transform. Change the center of rotation and scaling with transform-origin (by default the middle, 50% 50%).

Watch out

Any value other than none makes the element a stacking context and the containing block for position: fixed descendants.
The standalone translate, rotate and scale properties also exist and apply before transform, in that order.
The controls cover the 2D functions only. Type rotateX(), perspective() or matrix() into the code and the preview still shows them.

References

MDN Web Docstransform SpecificationCSS Transforms Module Level 1 Can I usetransform