Hello fellow devs and lovers of CSS. I recently came across some "new" CSS properties and I am putting new in quotes because there are not exactly new in the sense that they just got added to CSS but they have always been there, just that they are all under one property (can we say they are sub-properties? I think that's the right word).
The 3 properties I am talking about are scale, rotate, and translate. They were initially only under the transform property and to use either one of them, you will have to do something like transform: rotate (10deg). But some issues can come when using this property especially when you have to animate things using the hover pseudo-class or animation property. To give you an example of what I'm talking about, let's look at a simple example.
I have already created 2 boxes using 2 divs and I gave both of them a class of box. The first div also has a class of one, while the second has a class of two. After all that, we are going to have the below result.
The red box serves as a control, just so you can compare the changes carried out on the green box. first of all, I am going to increase the size of the green box using the old transform method.
.two {
transform: scale(1.5);
}
Now let's add a hover effect that rotates the box when a user hovers over it. It's very simple but you're not going to get the desired result.
.two:hover {
transform: rotate(10deg);
}
As you can see from the result, the box rotates but it reverts to its original size once a user hovers over it. This happens because even though we are using different sub-properties (scale and rotate), we are still referring to the transform property. This means that the second transform property is overwriting the first one.
CSS read codes from top to bottom, so once it gets to the first transform, it says: "okay, let's increase the size of this box by setting the scale to 1.5. But then once a user hovers over the box, CSS goes to the second transform property and says; "you know what, we are no longer increasing the size of the box, so cancel that and just use this current declaration which is to rotate it by 10deg".
The same thing happens when you use the animation property: once the animation starts, it will cancel the previous transform declaration and use the new one specified within the animation block. Newbies always run into this problem and they get confused about why it's not working the way it's written but there's a very simple workaround to this.
.two:hover {
transform: rotate(10deg) scale(1.5);
}
That's right, just adding the initial scale value to the hover declaration block will fix this issue. Even if the scale(1.5) in the first transform property gets overwritten by the second one, at least we still have the same scale sub-property in that second one. With this, the code will work as intended.
The new properties
These 3 sub-properties (scale, translate, and rotate) can now be used on their own without having to rely on the transform property. Using them as a stand-alone property will eliminate all of those problems I talked about earlier without having to use that simple walk-around. What do I mean? Let's try to scale the box by 1.5 and then rotate it on hover by using the new properties.
.two {
scale: 1.5;
transition: rotate 0.4s ease;
}
.two:hover {
rotate: 10deg;
}
It's as simple as that and you will get the intended result.
There's no overwriting with these new properties because each of them have no business with the other. Even if you do a scale 1.5 on the box and then apply a rotation on it on hover, the
rotate property won't overwrite the scale property, they are now completely independent!
Each of those properties also have additional features that you can use to achieve different results.
Translate
Typically you can give it just one value and it will take it as the default which is the x-axis. For example translate: 50px will push the box to the right and adding a minus sign (-50px) will push the box to the left. You can add another value to this and that will represent the y-axis. For example: translate: 50px 80px will push the box 50px to the right and then 80px down. If you only want to push the box down, you can just do translate: 0 80px.
Scale
Setting just one value for the scale property will increase the size of the element on both the x and y-axis. scale: 1.5 means the size on the x-axis will increase by 1.5 and the same applies to the y-axis, this will ensure the box only increases in size without altering its shape (it will remain a square box). If perhaps you want different values, you can do something like scale: 1.6 1.2, this means the size on the x-axis will increase by 1.6 and the y-axis by 1.2, this will result in a rectangle.
Rotate
The rotate property also accepts only one value as default and this will rotate the box on the z-axis. You can do a rotation on the x and y axis as well by doing something like rotate: x 45deg or rotate: y 45deg. You can also do a rotation on all three axes at the same time; rotate: 1 1 1 45deg. This simply means we are rotating the box on the x, y, and z axis by 45deg (it's a 3D rotation). This will result in something like this:
You can even do something cool by adding a rotate: -20deg (or any other value) on hover and it will produce the below result.
Conclusion
The 3 new properties can still be used through the transform property and you can continue using it if that's what you prefer. These new properties are now supported in the latest versions of most modern browsers but if you're worried about compatability issues in older versions, then you should probably stick with the transform property.
I personally love these new properties because it means I can now write fewer codes and it looks cleaner than using the transform property. What do you think about these new properties? Will you start using them or you will continue doing things the old way by using the transform property?
Thanks for reading
Connect with me on:
Twitter: @kushyzeena
Readcash: @kushyzee
Edited with Canva