CODEWITHSUNDEEP
cssanimationtransformscale
Nathaz
Nathaz

Reputation: 53

Transform scale: problem with scaling down

I am facing to some kind of weird problem, which occurs after scaling down the element.

enter image description here

div{
  padding: 60px;
  margin:100px;
  background-color:red;
  transition:1s;
}
div:hover {
  transform:scale(1.2);
}
<div>abc</div>

Have you ever met with something like this? Does it occur because of some performance issue?

Thanks.

Upvotes: 2

Views: 639

Answers (1)

Temani Afif
Temani Afif

Reputation: 272608

Use a 3D transformation instead:

div{
  padding: 60px;
  margin:100px;
  background-color:red;
  transition:1s;
  transform:perspective(100px) translateZ(0);
}
div:hover {
  transform:perspective(100px) translateZ(10px);
}
<div>abc</div>

Upvotes: 1

Related Questions