# transform

Sara Cope on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with \$200 in free credit!

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

``````/* 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.

### transform

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

### Browser support

#### Support for 2D Transforms

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

#### Desktop

ChromeFirefoxIEEdgeSafari
4*3.5*9*123.1*

#### Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
1261272.1*3.2*

#### Support for 3D Transforms

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

#### Desktop

ChromeFirefoxIEEdgeSafari
12*10*11124*

#### Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
1261273*3.2*