Let's understand the CSS scale property 🤨

Hey coding people,

Hope you guys doing great,

This is post is a part of our 20-day transition property post.

20 Days of CSS animation post💪

🚩 Atul Prajapati 🇮🇳 ・ Jan 30 '21 ・ 1 min read

#css #html #beginners

In this post, we will learn and play with CSS transform's scale property.

Lets first understand the meaning of scale, according to google scale means ruler, gauge, dimension, etc.

In words use of CSS, scale property is to scale up and scale down the size of an element. There are four variations in scale property which is like this.

• transform: scaleX(2); /* Targetting only X-axis */
• transform: scaleY(4); /* Targetting only Y-axis */
• transform: scaleX(0.5) scaleY(2); /* Targetting X-axis and Y-axis both */
• 100% { transform: scale(0.5, 2); } /* Targetting X-axis and Y-axis both with shorthand property */

Now to memories your this concept play with these codepen project.

And if you guys interested in my free website templates please download them here 👉AtulCodex Marketplace 🏪.