1

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.

mikekoscinski
  • 555
  • 1
  • 4
  • 14
  • 2
    transform-origin: top left ? – Temani Afif Jun 26 '20 at 22:36
  • Yes, this works. However, I am trying to have this auto-center within the center of the screen, no matter what the screen width. When I use `transform-origin: top center;` I experience the same error that I described earlier. Using `top center` works on desktop with a full-width screen, but it doesn't work with a smaller width screen on desktop. It doesn't work on mobile either. – mikekoscinski Jun 27 '20 at 17:18

1 Answers1

4

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;

Priya
  • 76
  • 2
  • This had the same effect as the method mentioned by Temani above. However, both create another issue: they generate large, empty margins. Trying to figure out a fix for that now – mikekoscinski Jun 27 '20 at 17:39