CSS Personal Transform Properties – Dev Community

CSS transformations are a useful way to translate, rotate, and create 3D objects in CSS. I previously covered how CSS works here, and I even created a 3D Minecraft Chicken to show you how you can use them to create 3D animated objects.

In this short guide, I would like to include the fact that recently, CSS has made some changes in CSS transformations. Previously, the syntax was a bit confusing. If we want to translate something along the x axis and rotate it, we need to do something like this:

div {
    transform: rotateX(45deg) translateX(40px);
}
enter fullscreen mode

exit fullscreen mode

It was fine, but it caused all kinds of issues with the animations. Consider the following CSS, for example:

div {
    transform: rotateX(45deg) translateX(40px);
}
div:hover {
    transform: rotateX(75deg);
}
enter fullscreen mode

exit fullscreen mode

It, in fact, only rotates on the X axis by 75deg, it also resets translateX To 0px, This might ok but ok you have to declare it again translateX Even now 40px,

div {
    transform: rotateX(45deg) translateX(40px);
}
div:hover {
    transform: rotateX(75deg) translateX(40px);
}
enter fullscreen mode

exit fullscreen mode

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

Data on support for the mdn-css__properties__rotate feature in major browsers

individual css conversion properties

The properties that can now be used in CSS are:

Each of these accepts different values.

to scaleWhen a value is provided for scale it represents both scaleX And scaleY, While 2 refers to setting different values ​​for the scaleX And scaleYand the 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 */
}
enter fullscreen mode

exit fullscreen mode

To rotateIndicates a rotation around a single value z Axis. If we want to rotate in the other direction, we just add the letter we want to rotate. If we want to rotate in multiple directions, we pass in a directional vector like 1 1 1 And with the same functionality as the angle we want to use 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. */
}
enter fullscreen mode

exit fullscreen mode

to interpretA single value a will represent x translation, two will represent one x And y translation, and the third value is a . represents z translate.

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 */
}
enter fullscreen mode

exit fullscreen mode

Benefits of individual CSS transformation properties

These new properties reduce the confusing method previously used for some of the most commonly used transform properties. A complex transformation like this:

div {
    transform: scale(2) translateX(45px) translateY(20px) rotate(45deg);
}
enter fullscreen mode

exit fullscreen mode

It can be simplified:

div {
    scale: 2;
    rotate: 45deg;
    translate: 45px 20px;
}
enter fullscreen mode

exit fullscreen mode

conclusion

These individual CSS properties simplify what was once confusing long lines of CSS transformations. they do not replace transform property because it supports functions like skew, which does not have personal qualities. However, they go a long way in making CSS more readable.

Leave a Comment