Three new CSS properties: hit or miss?

in Programming & Dev3 months ago (edited)

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

Lead image: Image by vectorjuice on Freepik
Edited with Canva
Sort:  

Hmm... I totally ignored those properties when I was learning CSS and just mastered the transform because I felt they were making things complicated. I guess that's why I was having a hard time with animations but it's all clear now thanks to you!

These properties are very useful and important when it comes to hover effects and animations, especially scale and rotate. Translate is very handy when it comes to centering a div 😁. Thanks for visiting bro


The rewards earned on this comment will go directly to the people( @kushyzee ) sharing the post on Twitter as long as they are registered with @poshtoken. Sign up at https://hiveposh.com.

You are so good at programming... One day, I won't wonder if you'll create a program for Hive chain too haha.

I have been thinking about that lately and I will probably create something for hive later in the future 😁 Thank you Ate

Nice.. Looking forward hehe. !PIZZA

Thanks for the Pizza 🤗

CSS is always a chalenge for me! And you master it ! congratz

!1UP

I don't really see myself as a master at CSS, I just have lots of experience using it. Thanks for reading

I've been trying to learn some basic coding so I can slowly level up and study web design so these things are very useful for me to know!

Happy to come across your post! Following you to check for more posts like this 😁

!CTP
!PIZZA

Thanks for the encouraging words 😊 I will certainly publish more articles about web development and design as time goes on, I love writing about these things because I know someone out there will find them useful.

Thank you for the tokens! 😊

Congratulations @kushyzee! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

You have been a buzzy bee and published a post every day of the week.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Check out the last post from @hivebuzz:

HiveFest⁷ badges available at the HiveBuzz store
HiveFest⁷ meetup in Amsterdam is next week. Be part of it and get your badge.
Support the HiveBuzz project. Vote for our proposal!

PIZZA! PIZZA!

PIZZA Holders sent $PIZZA tips in this post's comments:
@elianaicgomes(3/15) tipped @kushyzee (x1)
jane1289 tipped kushyzee (x1)

Learn more at https://hive.pizza.

1UP-PIZZA.png

You have received a 1UP from @gwajnberg!

The @oneup-cartel will soon upvote you with:
@stem-curator, @vyb-curator, @pob-curator, @neoxag-curator, @pal-curator
And they will bring !PIZZA 🍕.

Learn more about our delegation service to earn daily rewards. Join the Cartel on Discord.

Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!

Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).

You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support. 
 

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".

you did not get this statement well.

it should have been, you know what, a new order has been given from above that we should not just increase the size but let's turn the boat sideways.

because looking at the box2, the box is still enlarged and the previous command was not really overwritten but another command was added to it.

Awesome properties man! In some months time, I hope to come back working with HTML and Css again. Been a while since I used it or tried building the frontend of a website.

.two:hover {
transform: rotate(10deg);
}

This was the code I was explaining when I made that statement. If you look at the picture, you will see that the box actually shrunk down to its default size when I hovered over it. But when I added scale(1.5) to the code, the box increased and rotates when I hover (which is exactly what you explained)

My bad, I didn't look at the image well.. Yeah the size actually reduced...

I'm currently studying CSS. This could be a help for a beginner like, since the only thing I have learned up to now, is changing the font's color, size, and family, then adding pictures. 😆

Thanks for this, @kushyzee.

You have learnt some of the basics of CSS and I am guessing you're taking things slow which is a great idea coz CSS can get confusing at one point, taking your time to learn the basics will greatly benefit you 😊 I am glad you found my article helpful, goodluck to you on your web development journey

I really enjoyed the "hover trick" that you presented at the end of this blog. It looks like magic, and is so easy to implement. Damned, I am so old-school when it comes to HTML/CSS and web programing in general... I have the knowledge of the 90ies, which is pretty out-dated today... ;)

Knowledge of the 90ies are the foundation of all we have today, I'm pretty sure you won't have a hard time understanding and using modern day web programming trends if you want to 😊

I agree. it is more a matter of having the time to dedicate to it (which I currently don't have).