Wag*_*Paz 2 css css-transforms
我有一个 6400x3600 大小的 div。我正在使用变换原点：50% 50%。当我将比例设置为 0.9 时，为了让孩子们停留在左上角，我需要将其转换为负值。我的推理是 6400 - 5760(90%) = 640 / 2 = 320...所以对于 x 它应该转换 -320px .. 但实际上需要的是 -355.556px。
示例：https : //jsfiddle.net/fvnq3ewj/28/
* {
padding: 0;
margin: 0;
}
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 6400px;
height: 3600px;
background-color: red;
transform-origin: 50% 50%;
transform: scale(0.9) translate(-355.556px, -200px);
}<html>
<body>
<div class="container">
</div>
</body>
</html>有人对此有任何解释吗？
由于翻译是在scale()它之后完成的，它也会被缩放，所以你320px需要除以0.9得到正确的值：
320/0.9 = 355.56
换句话说，您需要经过355.56px才能真正获得320px. 这有点棘手，但想象一下你自己在另一个由0.9. 对那个世界之外的距离的感知在缩放的世界中是不同的。
获得有关数学的更多详细信息的相关问题：为什么转换顺序很重要？旋转/缩放不会给出与缩放/旋转相同的结果
在你的情况下：
scale(0.9) translate(A, B)
相当于：
|0.9 0 0| |1 0 A| |0.9 0 A*0.9|
|0 0.9 0| x |0 1 B| = |0 0.9 B*0.9|
|0 0 1| |0 0 1| |0 0 1 |
所以
Xf = 0.9*(Xi + A);
Yf = 0.9*(Yi + B);
如果你做相反的事情（翻译然后缩放），你可以使用 320px
320/0.9 = 355.56
scale(0.9) translate(A, B)
数学将是：
|1 0 A| |0.9 0 0| |0.9 0 A|
|0 1 B| x |0 0.9 0| = |0 0.9 B|
|0 0 1| |0 0 1| |0 0 1|
Xf = 0.9*Xi + A;
Yf = 0.9*Yi + B;
请注意平移值如何不受比例因子影响
如果您想更深入地了解，我们可以考虑transform-origin获得完整的公式。这是一个相关的问题：Simulating transform-origin using translate
所以完整的矩阵乘法将变成：
|1 0 50%| |0.9 0 0| |1 0 A| |1 0 -50%|
|0 1 50%| x |0 0.9 0| x |0 1 B| x |0 1 -50%|
|0 0 1 | |0 0 1| |0 0 1| |0 0 1 |
我们将获得：
Xf = 0.9*Xi + 0.9*(A - 50%) + 50%;
Yf = 0.9*Yi + 0.9*(B - 50%) + 50%;
我们需要将元素保留在左上角，因此(Xi,Yi) = (0,0)我们还需要获得(Xf,Yf) = (0,0)
0 = 0.9*(A - 50%) + 50%;
A = 50%*(0.9 - 1)/0.9
A = 50%*-0.111111
而50% = 6400px/2 = 3200px
再A = -355.52px
B获取相同的逻辑-200px
对于相反的顺序，我们将有：
Xf = 0.9*Xi - 0.9*50% + A + 50%;
Yf = 0.9*Yi - 0.9*50% + B + 50%;
A = (0.9 - 1)*50% = -320px
B = -180px