DEV Community

loading...
Cover image for Let's understand the CSS scale property ๐Ÿคจ

Let's understand the CSS scale property ๐Ÿคจ

atulcodex profile image Atul Prajapati ใƒปUpdated on ใƒป1 min read

Hey coding people,

Hope you guys doing great,

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

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 ๐Ÿช.

Discussion (0)

pic
Editor guide