CODEWITHSUNDEEP
htmlcsscss-transforms
Kuii Maldonado
Kuii Maldonado

Reputation: 5

Can I use transform:scale() inside a <div> tag?

I've been trying to use this code snippet:

<div style="transform:scale(2,0)"><p>Hello World</p></div>

But the div doesn't change its size. Am I doing something wrong? Or is it that I can't use the transform:scale() inside the div.

Upvotes: 0

Views: 426

Answers (1)

Temani Afif
Temani Afif

Reputation: 274034

You have 2 issues. First you are using 0 value in the second argument which means that you are scaling your element to 0 height thus its invisible.

If we correct this and we make it 1 you need to consider the origin of the scale which is the center of your element by default, so scaling twice will make the text to disappear on the left of the screen.

Add an animation and you will clearly notice this:

.change {
 animation:change 2s linear infinite alternate;
 border:1px solid;
 /*the center*/
 background:linear-gradient(red,red) center/10px 100% no-repeat;
}
@keyframes change{
  to{transform:scale(2,1);}
}
<div class="change"><p>Hello World</p></div>

You need to adjust the transform-origin and you will be able to see the element

<div style="transform:scale(2,1);transform-origin:left;"><p>Hello World</p></div>

Upvotes: 2

Related Questions