Skip to main content
Home / CSS Almanac / Properties / T / transform

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:

See the Pen Transform explanation by CSS-Tricks (@css-tricks) on CodePen.

Giving this function two values will stretch it horizontally by the first and vertically by the second. In the example below 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. There is no shorthand skew property.
  • 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

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

.element {
  transform: skewY(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:

See the Pen Transform explanation by CSS-Tricks (@css-tricks) on CodePen.

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

See the Pen Transform explanation by CSS-Tricks (@css-tricks) on CodePen.

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:

See the Pen Transform explanation by CSS-Tricks (@css-tricks) on CodePen.

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

See the Pen Transform explanation by CSS-Tricks (@css-tricks) on CodePen.

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:

See the Pen Transform explanation by CSS-Tricks (@css-tricks) on CodePen.

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 4x4 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

Related Properties

Browser Support

2D Transforms

Chrome Safari Firefox Opera IE Android iOS
Any 3.1+ 3.5+ 10.5+ 9+ 4.1+ At least 4

3D Transforms

Chrome Safari Firefox Opera IE Android iOS
10+ 4+ 12+ none 10+ 4.1+ 5+

Vendor prefixes

.element {
  -webkit-transform: value;
  -moz-transform:    value;
  -ms-transform:     value;
  -o-transform:      value;
  transform:         value;
}
icon-link icon-logo-star icon-search icon-star