CODEWITHSUNDEEP
htmlcssscale
2339870
2339870

Reputation: 1487

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.

Upvotes: 44

Views: 68616

Answers (4)

kbriggs
kbriggs

Reputation: 1307

I know this question is 3 years old but I just stumbled on it. The reason your transform is not positioned correctly is that your transform-origin parameters are backward 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.

Upvotes: 33

mohamedrias
mohamedrias

Reputation: 18566

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);

Upvotes: 0

2339870
2339870

Reputation: 1487

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.

Upvotes: 60

Weilory
Weilory

Reputation: 3111

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%);

Upvotes: 0

Related Questions