CODEWITHSUNDEEP
htmlcsstransformscale
mikekoscinski
mikekoscinski

Reputation: 665

CSS scale of element by -50% without moving it from original location

I am trying to shrink an entire element by 50% while maintaining the same 1:1 ratio. However, whenever I use

transform: scale(0.5);

The element shifts down and to the right. I cannot figure out how to implement this 50% reduction in scale without causing the element in question to move from its original position.

When I use

transform: translate(0, 0);

with the aforementioned scale method, it negates the effect of the size reduction.

I would prefer to solve this without any negative margin hacks, as this must render on several different devices. Any advice would be greatly appreciated. Thanks in advance for your help.

Upvotes: 1

Views: 3701

Answers (1)

Priya
Priya

Reputation: 76

you need to add another property to it.transform-origin: 0 0; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; -moz-transform-origin: 0 0;

Upvotes: 4

Related Questions