CSS从左上角开始缩放

Question

我正试图从左上角缩放整个页面。这就是我的原始页面：

但是，当我尝试缩放页面时，会发生这种情况：

这是我的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;
}

我做错了什么？它切断了我的部分页面。

Answer 1

我能够解决＆＃34;我的问题。

这就是我的尝试：

• 在问题中显示的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。

• 我还更改了容器div的CSS，使其居中。

这解决了这个问题，部分原因是它很好地适用于页面。

但是，首页的部分内容仍未正确显示。要解决此问题，我在margin-top添加了body。

Answer 2

我知道这个问题是3岁但我偶然发现它。您的变换定位不正确的原因是因为您的transform-origin参数是向后的，因此被忽略。这是“变换原点：x轴y轴”所以你应该有“transform-origin：left top”，而不是“transform-origin：left left”。

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