'CSS scale from left top

I am trying to scale my entire page from the top left. This is what my original page looks like:

enter image description here

However when I try to scale my page, this happens:

enter image description here

This is my CSS:

html {
    zoom: 1.4; /* Old IE only */
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    transform-origin: top left;
}

What am I doing wrong? It cuts off part of my page.

htmlcssscale


Solution 1:[1]

I was able to "solve" my problem.

This is what I tried:

  • In the CSS shown in the question, I changed html to body:

    body {
    zoom: 1.4; /* Old IE only */
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    transform-origin: top center;
    margin-top: 5px;
}

  • I changed transform-origin: top left to transform-origin: top center.

  • I also changed the CSS of my container div so that it is centered.

This fixed the problem partly as it centered to page nicely.

However, part of the top page still isn't displayed correctly. To fix this I added a margin-top to my body.

Solution 2:[2]

I know this question is 3 years old but I just stumbled on it. The reason your transform is not positioned correctly is because your transform-origin parameters are backwards and thus are ignored. It's "transform-origin: x-axis y-axis" so you should have "transform-origin: left top", not "transform-origin: top left".

Solution 3:[3]

 zoom: 1.4; 
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);

Scaling is cutting off your content. Reduce scaling to 0.4, it's rendering properly.

zoom: 0.4; 
-moz-transform: scale(0.4);
-webkit-transform: scale(0.4);

Solution 4:[4]

for some reason, my browser seems to ignore transform-origin for particular elements such as iframe, therefore, in order to transform by left top, I wrote them all in transform property;

transform: scale(0.5) translate(-50%, -50%);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 random_user_name
Solution 2 kbriggs
Solution 3 mohamedrias
Solution 4 Weilory

Related Questions