CSS Individual Transform Properties
📣 Sponsor
CSS transforms are a useful way to translate, rotate, and create 3d objects in CSS. I covered previously how CSS transforms work here, and I also created a 3d 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:
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:
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:
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.
Data on support for the mdn-css__properties__rotate feature across the major browsers
Individual CSS Transform Properties
The properties that can now be used in CSS are:
scaletranslaterotate
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:
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.
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.
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:
div {
transform: scale(2) translateX(45px) translateY(20px) rotate(45deg);
}
Can be simplified to:
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.