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

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

- 2339870

---

请问您能否发布您的HTML代码？ - Alex Char

https://dl.dropboxusercontent.com/u/42705761/knkvp.html - 2339870

无法理解出错的原因。 - Alex Char

只是提醒一下：缩放和缩放比例不同。例如，在Chrome中，您的代码将同时进行缩放和缩放比例调整。因此，这不仅限于旧版IE。 - Izzy

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，以使其居中。

这部分修复了问题，使页面居中显示得很好。

然而，页面顶部的某些部分仍未正确显示。为解决此问题，我向body添加了margin-top。

- 2339870

Answer 2

我知道这个问题已经有3年了，但我刚刚偶然发现它。你的变换没有正确定位的原因是你的transform-origin参数颠倒了，因此被忽略了。它应该是“transform-origin: x轴 y轴”，所以你应该写“transform-origin: left top”，而不是“transform-origin: top left”。

- kbriggs

---

我经常自己搞混X和Y，一个老师给了我一个助记符：X在左边，Y往上飞。虽然不是严格的技术标准，但任何需要方向或坐标的东西通常都需要以“X,Y”格式提供。请注意，这里的“mnemonic device”翻译成了“助记符”。 - Regular Jo

这个答案确实解决了问题，谢谢。 - undefined

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

- mohamedrias

---

zoom 是非标准的 CSS 属性，不建议在生产环境中使用。 - Duannx

Answer 4

由于某些原因，我的浏览器似乎忽略了特定元素如iframe的transform-origin属性，因此为了按左上角进行变换，我将它们全部写在transform属性中。

transform: scale(0.5) translate(-50%, -50%);

- Weilory