CSS Transforms

CSS Transforms

CSS transforms change the visual position, size, angle, or shape of an element without changing the normal layout around it. The transform property can move, rotate, scale, skew, and transform elements in two-dimensional or three-dimensional space.

Transforms are commonly used for interface effects, image presentation, interactive controls, animations, and other visual changes.

How Transforms Work

The transform property applies one or more transform functions to an element.

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

This rotates the element 15 degrees clockwise around its transform origin.

A transformed element remains associated with its original position in normal document flow. The transform changes how the element is visually rendered rather than causing surrounding elements to be laid out around its transformed shape.

Translate Elements

The translate() function moves an element from its original position along the horizontal and vertical axes.

.box {
  transform: translate(40px, 20px);
}

The first value moves the element horizontally. The second value moves it vertically. Positive horizontal values move toward the right in the usual left-to-right coordinate system, while positive vertical values move downward.

You can also transform one axis individually.

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

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

Percentages used with translation are based on the dimensions of the element's reference box rather than the dimensions of its containing element.

Rotate Elements

The rotate() function rotates an element around its transform origin.

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

Angles are commonly written using degrees. Positive angles rotate clockwise in the usual screen coordinate system, while negative angles rotate in the opposite direction.

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

CSS also supports other angle units, including turn, rad, and grad.

.box {
  transform: rotate(0.25turn);
}

A quarter turn is equivalent to 90 degrees.

Scale Elements

The scale() function changes the visual size of an element.

.box {
  transform: scale(1.25);
}

A value greater than 1 enlarges the element, while a value between 0 and 1 makes it smaller.

Separate horizontal and vertical scale factors can also be supplied.

.box {
  transform: scale(1.5, 0.75);
}

The element is scaled to 1.5 times its original width and 0.75 times its original height.

The scaleX() and scaleY() functions can scale an individual axis.

Skew Elements

The skew() function slants an element along the horizontal and vertical axes.

.box {
  transform: skew(15deg, 5deg);
}

The first angle controls the horizontal skew and the second controls the vertical skew.

The skewX() and skewY() functions can apply the transformation to one axis.

.box {
  transform: skewX(20deg);
}

Skewing changes the apparent shape of the element without changing the space originally allocated to it in normal flow.

Multiple Transforms

Multiple transform functions can be placed in the same transform declaration and are applied as a combined transformation.

.box {
  transform: translateX(40px) rotate(15deg) scale(1.2);
}

The order of transform functions matters. Changing their order can produce a different result because each transformation affects the coordinate system used by subsequent transformations.

.first {
  transform: translateX(50px) rotate(30deg);
}
.second {
  transform: rotate(30deg) translateX(50px);
}

Although the same two functions are used, the elements can end at different visual positions.

transform-origin

The transform-origin property specifies the point around which a transformation is applied.

.box {
  transform-origin: center;
  transform: rotate(30deg);
}

The default transform origin for many CSS boxes is the center of the element.

The origin can be changed using keywords, lengths, or percentages.

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

Changing the origin is especially noticeable with rotation and scaling because it changes the point from which the transformation occurs.

2D Transforms

Two-dimensional transforms operate primarily along the x-axis and y-axis of the element's coordinate system.

The individual transform functions are usually easier to read and edit than a manually written matrix() value.

3D Transforms

CSS also supports transformations in three-dimensional space by adding a z-axis that extends toward or away from the viewer.

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

Functions such as translateZ(), rotateX(), rotateY(), rotateZ(), and scale3d() can participate in 3D transformations.

Perspective can be used to create a sense of depth.

.scene {
  perspective: 600px;
}
.box {
  transform: rotateY(45deg);
}

The perspective property establishes perspective for transformed descendants of the element to which it is applied. Smaller positive perspective lengths generally produce a stronger perspective effect.

Transforms and Document Layout

Transforms affect an element's visual rendering but do not cause normal-flow layout to be recalculated around the transformed shape.

.box {
  transform: scale(1.5);
}

The box appears larger, but surrounding content generally continues to use the space assigned to the box before the transform was applied. A transformed element can therefore overlap nearby content.

Transforms can also affect positioning and stacking behavior in more advanced layouts, so they should be tested when used with positioned descendants or overlapping content.

Common Transform Functions

CSS Transform Example

The following example uses four boxes to demonstrate translation, rotation, scaling, and skewing.

.translate {
  transform: translateX(20px);
}
.rotate {
  transform: rotate(15deg);
}
.scale {
  transform: scale(1.2);
}
.skew {
  transform: skewX(15deg);
}

Open the example in the editor and change the transform values to see how each function changes its element. You can also combine two or more transform functions in a single declaration to compare the results.