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

我能够"解决"我的问题.

这是我试过的:

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