Шкала CSS слева вверху

Я пытаюсь масштабировать всю свою страницу в верхнем левом углу. Вот как выглядит моя оригинальная страница:

Однако, когда я пытаюсь масштабировать мою страницу, это происходит:

Это мой 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;
}

Что я делаю неправильно? Он отсекает часть моей страницы.

Ответ 1

Я смог "решить" мою проблему.

Это то, что я пробовал:

В CSS, указанном в вопросе, я изменил html на 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;
}

Я изменил transform-origin: top left на transform-origin: top center.
Я также изменил CSS моего контейнера div так, чтобы он был центрирован.

Это частично устранило проблему, так как она была сосредоточена на странице.

Однако часть верхней страницы все еще отображается неправильно. Чтобы исправить это, я добавил margin-top в мой body.

Ответ 2

Я знаю, что этот вопрос составляет 3 года, но я просто наткнулся на него. Причина, по которой ваше преобразование неправильно позиционируется, заключается в том, что параметры вашего происхождения трансформации обращены назад и поэтому игнорируются. Он "transform-origin: ось оси x оси", поэтому вы должны иметь "transform-origin: left top", а не "transform-origin: top left".

Ответ 3

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

Масштабирование отключает ваш контент. Уменьшите масштабирование до 0,4, чтобы он правильно отображался.

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