The CSS transform Property

Overview

The transform property enables visual manipulation of an element by rotating, scaling, skewing, or translating it in 2D and 3D space. When applied, it changes the way the element is positioned and layered, effectively creating a new context for the elements it contains.

However, transformations can only be applied to transformable elements. These are essentially all elements that follow the CSS box model rules, with a few specific exceptions such as certain inline boxes and table-related boxes.

Examples and Usage

To demonstrate the usage, we'll present an example with some of the transformation methods and their effects. Each transformation is applied to an element within a reference block, making it easier to track changes in the element's position relative to its parent.

HTML Structure

<div class="reference">
    <div>Non-tranformed shape</div>
</div>

<div class="reference">
    <div class="translate-x">translateX()</div>
</div>

<div class="reference">
    <div class="translate-y">translateY()</div>
</div>

<div class="reference">
    <div class="scale">scale()</div>
</div>

<div class="reference">
    <div class="rotate">rotate()</div>
</div>

<div class="reference">
    <div class="skew">skew()</div>
</div>

Note: We've used multiple stacked div elements for simplicity. In a real-world application, it's important to avoid "divitis" - the overuse of div elements where more semantic HTML could be used.

CSS Styling

Now, let's apply some styling to the reference elements and the transformed elements within them.

div {
    background-color: #fbbf24;
    height: 5rem;
    padding: .25rem;
    width: 5rem;
}

.reference {
    background-color: #FFFFFF;
    margin: 2rem 0;
    padding: 1rem;
    border: 2px solid red;
    position: relative;
    height: 15rem;
    width: 15rem;
}

.translate-x {
    /* Moves the shape 60px to the right along the X-axis from its original position */
    transform: translateX(60px);
}

.translate-y {
    /* Moves the shape 40px down along the Y axis from its original position */
    transform: translateY(40px);
}

.scale {
    /* Increases the shape's size by 50% along both X and Y axes */
    transform: scale(1.5);
}

.rotate {
    /* Rotates the shape 30 degrees clockwise around its center */
    transform: rotate(30deg);
}

.skew {
    /* Skews the shape 10 degrees along the X-axis and 20 degrees along the Y-axis */
    transform: skew(10deg, 20deg);
}

In the example above, the set of reference elements is identical squares in a uniform grid. Each element within the reference is then subject to a different transformation.

Initially, the translate functions move an element either horizontally (along the X axis) or vertically (along the Y axis). Then, the scale() function increases the size of the element in relation to its original dimensions, while rotate() turns the element around its center. Lastly, skew() distorts the shape by an angle along the specified axes.

Values

The transform property accepts the following values:

Value	Description
`none`	No transformation applied.
`matrix(n,n,n,n,n,n)`	A 2D transformation using a six-value matrix.
`matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)`	A 3D transformation using a 16-value 4x4 matrix.
`translate(x, y)`	A 2D translation along the X and Y axes.
`translate3d(x, y, z)`	A 3D translation along the X, Y, and Z axes.
`translateX(x)`	A translation using only the X-axis value.
`translateY(y)`	A translation using only the Y-axis value.
`translateZ(z)`	A 3D translation using only the Z-axis value.
`scale(x, y)`	A 2D scale transformation along the X and Y axes.
`scale3d(x, y, z)`	A 3D scale transformation along the X, Y, and Z axes.
`scaleX(x)`	A scale transformation with the X-axis value only.
`scaleY(y)`	A scale transformation with the Y-axis value only.
`scaleZ(z)`	A 3D scale transformation with the Z-axis value only.
`rotate(angle)`	A 2D rotation with a specified angle.
`rotate3d(x, y, z, angle)`	A 3D rotation around an axis defined by the x, y, and z values.
`rotateX(angle)`	A 3D rotation along the X-axis with a specified angle.
`rotateY(angle)`	A 3D rotation along the Y-axis with a specified angle.
`rotateZ(angle)`	A 3D rotation along the Z-axis with a specified angle.
`skew(x-angle, y-angle)`	A 2D skew transformation along the X and Y axes.
`skewX(angle)`	A 2D skew transformation along the X-axis.
`skewY(angle)`	A 2D skew transformation along the Y-axis.
`perspective(n)`	A perspective view for a 3D transformed element with a specified distance.

Associated Properties

transform-box
transform-origin
transform-style
perspective

Tips and Tricks

While translate() and translate3d() both allow for movement along the X, Y, and Z axes, translate3d() and scale3d() enable depth perception which can enhance the 3D effect.
The transform-origin property is handy when you need to adjust the origin for transformations. By default, transformations happen around the center of the element.
transform affects the visual rendering, but it doesn't affect the flow of other elements. It means other elements won't adjust their positions in response to the transformation.
Remember that the transformations apply in the order they are listed. For instance, transform: rotate(45deg) translateX(20px); will first rotate the element, then translate it along the X axis.
The transform property affects the element's position and shape, but not its logical or physical dimensions; margins, borders, padding, and actual dimensions are not adjusted by transformations.

Browser Compatibility

Browser compatibility varies for 2D and 3D transformations.

2D Transformations

Older versions of Chrome, Safari, Firefox, Opera, and IE require vendor prefixes for proper functioning.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes*	Yes*	Yes*	Yes*	Yes*	Yes*

Note: Edge versions from 12-16, and IE from 9-11 don't support CSS transforms on SVG elements, and a transform attribute could be used instead.

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

3D Transformations

Older versions of Chrome, Safari, Firefox, and Opera require vendor prefixes for proper functioning. (see more in Useful Resources below)

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes*	Yes*	Yes*	Yes*	Yes*	Partial*

Note: IE versions 10 and 11, don't support transform-style: preserve-3d property, preventing nesting of 3D transformed elements.

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.