CSS Individual Transform Properties
Tags: css, webdev, tutorial, beginners
Published: 2022-10-22 18:49:24

CSS transforms are a useful way to translate, rotate, and create 3d objects in CSS. I covered previously [how CSS transforms work here](https://fjolt.com/article/css-transformations), and I also created a [3d Minecraft chicken](https://fjolt.com/article/css-minecraft-chicken) to show how you can use them to make 3D animated objects.

In this short guide, I want to cover the fact that recently, CSS has made a few changes to CSS transforms. Previously, the syntax was a little confusing. If we wanted to translate something along the X axis and rotate it, we had to do something like this:
```css
div {
    transform: rotateX(45deg) translateX(40px);
}
```

This was fine, but it let to all sorts of issues in animations. Consider the following CSS, for example:
```css
div {
    transform: rotateX(45deg) translateX(40px);
}
div:hover {
    transform: rotateX(75deg);
}
```

This does not, in fact, only rotate on the X axis by `75deg`. It also resets `translateX` to `0px`. This **might** be fine, but the fix is that you have to redeclare that `translateX` is still `40px`:
```css
div {
    transform: rotateX(45deg) translateX(40px);
}
div:hover {
    transform: rotateX(75deg) translateX(40px);
}
```

To fix this and other issues, CSS has introduced dedicated transformation properties, which now enjoy broad browser support, assuming you do not need to support Internet Explorer or some mobile browsers.

<p class="ciu_embed" data-feature="mdn-css__properties__rotate" data-periods="future_1,current,past_1,past_2" data-accessible-colours="false">
<p>Data on support for the mdn-css__properties__rotate feature across the major browsers</p>
</p>
<script src="https://cdn.jsdelivr.net/gh/ireade/caniuse-embed/public/caniuse-embed.min.js"></script>

## Individual CSS Transform Properties

The properties that can now be used in CSS are:
- `scale`
- `translate`
- `rotate`

Each of these accepts different values.

**For scale**, when one value is provided for `scale` it represents both `scaleX` and `scaleY`. While 2 values refers to setting different values for `scaleX` and `scaleY`, and a third value represents `scaleZ`. For example:
```css 
div {
    scale: 2; /* scales x and y by factor of 2 */
    scale: 2 1.5; /* scales x by factor of 2, and y by factor of 1.5 */
    scale: 2 1.5 3; /* scales x by factor of 2, y by factor of 1.5, and z by a factor of 3 */
}
```

**For rotate**, a single value indicates a rotation around the `z` axis. If we want to rotate in another direction, we simply add the letter we want to rotate around. If we want to rotate in multiple directions, we pass in a directional vector like `1 1 1` and the angle we want to use, with the same functionality as `rotate3d`.
```css
div {
    rotate: 45deg; /* Rotate 45deg along z axis */
    rotate: 1 1 2 45deg; /* Rotate 45deg across a directional vector of [1, 1, 2] */
    rotate: x 45deg; /* rotate individually along x axis by 45deg. */
}
```

**For translate**, a single value will represent an `x` translation, two will represent an `x` and `y` translation, and the third value represents a `z` translation.
```css
div {
    translate: 5px; /* Translate x by 5px */
    translate: 5px 10px; /* Translate x by 5px, and y by 10px */
    translate: 5px 10px 15px; /* Translate x by 5px, y by 10px, and z by 15px */
}
```

## Benefits of Individual CSS Transform Properties

These new properties reduce the confusing way transforms were handled before for some of the most commonly used transform properties. A complex transformation like this:
```css
div {
    transform: scale(2) translateX(45px) translateY(20px) rotate(45deg);
}
```

Can be simplified to:
```css
div {
    scale: 2;
    rotate: 45deg;
    translate: 45px 20px;
}
```

## Conclusion

These individual CSS properties simplify what once was confusing long lines of CSS transformations. They do not replace the `transform` property, since it supports functions like `skew`, which do not have individual properties. However, they do go a long way to make CSS more readable.