CSS scale from left top

html css scale

2339870 · May 20, 2014 · Viewed 38.3k times · Source

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.

Answer

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.

CSS scale from left top

Answer

Related questions