transform

The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling:

.element {
  width: 20px;
  height: 20px;
  transform: scale(20);
}

Even with a declared height and width, this element will now be scaled to twenty times its original size:

Giving this function two values will stretch it horizontally by the first and vertically by the second. In the following example, the element will now be twice the width but half the height of the original element:

.element {
  transform: scale(2, .5);
}

Or you can be more specific without using the shorthand function:

transform: scaleX(2);
transform: scaleY(.5);

But scale() is just one of many transform functions that are available.

Values

• scale(): Affects the size of the element. This also applies to the font-size, padding, height, and width of an element, too. It’s also a a shorthand function for the scaleX and scaleY functions.
• skewX() and skewY(): Tilts an element to the left or right, like turning a rectangle into a parallelogram. skew() is a shorthand that combines skewX() and skewY by accepting both values.
• translate(): Moves an element sideways or up and down.
• rotate(): Rotates the element clockwise from its current position.
• matrix(): A function that is probably not intended to be written by hand, but combines all transforms into one.
• perspective(): Doesn’t affect the element itself, but affects the transforms of descendent elements’ 3D transforms, allowing them all to have a consistent depth perspective.

• Skew
• Rotate
• Translate
• Multiple values
• Matrix
• 3D Transforms

Skew

/* Skew points along the x-axis */
.element {
  transform: skewX(25deg);
}

/* Skew point along the y-axis */
.element {
  transform: skewY(25deg);
}

/* Skew points along the x- and y-axis */
.element {
  transform: skew(25deg, 25deg);
}

The skewX and skewY transform functions tilt an element one way or the other. Remember: there is no shorthand property for skewing an element, so you’ll need to use both functions. In the example below, we can skew a 100px x 100px square to the left and right with skewX:

Whilst in this example we can skew an element vertically with with skewY:

Now let’s use skew() to combine the two:

Rotate

.element {
  transform: rotate(25deg);
}

This rotates an element clockwise from its original position, whilst a negative value would rotate it in the opposite direction. Here’s a simple animated example where a square continues to rotate 360 degrees every three seconds:

We can also use the rotateX, rotateY, and rotateZ functions, like so:

Translate

.element {
  transform: translate(20px, 10px);
}

This transform function moves an element sideways, or up and down. Why not just use top/left/bottom/right? Well, it’s a bit confusing at times. I would think of those as layout/positioning (they have better browser support anyway) and this as a way to move those things around as part of a transition or animation.

These values would be any length value, like 10px or 2.4em. One value will move the element to the right (negative values to the left). If a second value is provided, that second value will move it down (negative values up). Or, you can get specific:

transform: translateX(value);
transform: translateY(value);

It’s important to note that an element using transform will not cause other elements to flow around it. By using the translate function below and nudging the green square out of its original position, we’ll notice how the surrounding text will remain fixed in place, as if the square is a block element:

It’s also worth noting that translate will be hardware accelerated if you want to animate that property, unlike position: absolute.

Multiple values

With a space-separated list you can add multiple values to the transform property:

.element {
  width: 20px;
  height: 20px;
  transform: scale(20) skew(-20deg);
}

It’s worth noting that there is an order in which these transforms will be carried out, in the example above `skew` will be performed first and then the element will be scaled.

Matrix

The matrix transform function can be used to combine all transforms into one. It’s a bit like transform shorthand, only I don’t believe it’s really intended to be written by hand. There are tools out there like The Matrix Resolutions, which can convert a group of transforms into a single matrix declaration. Perhaps in some situations this can reduce file size, although author-unfriendly micro optimizations like that are likely not worth your time.

For the curious, this:

rotate(45deg) translate(24px, 25px)

…can also be represented as:

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

3D Transforms

Most of the above properties have 3D versions of them.

translate3d(x, y, z)
translateZ(z)

The third value in translate3d or the value in translateZ moves the element toward the viewer, negative values away.

scale3d(sx, sy, sz)
scaleZ(sz)

The third value in scale3d or the value in scaleZ affects the scaling along the z-axis (e.g. the imaginary line coming straight out of the screen).

rotateX(value)
rotateY(value)
rotate3d(x, y, z)

rotateX and rotateY will rotate an element in 3D space around those axises. rotate3d allows you to specify a point in 3D space in which to rotate the element around.

matrix3d(…)

A way to programmatically describe a 3D transform in a 4×4 grid. Nobody will ever hand write one of these, ever.

perspective(value)

This value doesn’t affect the element itself, but it affects the transforms of descendent elements’ 3D transforms, allowing them to all have a consistent depth perspective.

More Information

• MDN Docs on transform and usage.
• David DeSandro’s documentation on 3D transforms
• Surfin’ Safari: 3D transforms
• W3C spec on CSS3 transforms
• Intro to CSS 3D transforms
• Tricks for Using CSS translateZ() and perspective() (DigitalOcean)

Related properties

Random fact: a transform creates a positioning context just like position: relative;
does.

Browser support

Support for 2D Transforms

Support for 3D Transforms