理解 CSS 变换中的缩放后翻译答案

【问题标题】：Understanding translate after scale in CSS transforms理解 CSS 变换中的缩放后翻译
【发布时间】：2021-03-17 10:41:14
【问题描述】：

我有一个 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>

有人对此有什么解释吗？

【问题讨论】：

请提供一个最小的、可重现的例子。您可以使用 sn-p 工具。
@Periplo 提供
在其他链接上摆弄是不够的。请创建一个堆栈片段
为什么不@Paulie_D？只要您一起发布代码，堆栈就可以让您发布小提琴。我是新来的，抱歉.. 只是寻求帮助

标签： css css-transforms

【解决方案1】：

由于翻译是在scale() 之后完成的，它也会被缩放，所以你的320px 需要除以0.9 以获得正确的值：

320/0.9 = 355.56

换句话说，您需要移动355.56px 才能真正获得320px。这有点棘手，但想象一下你自己在另一个由0.9 缩放的世界中。对这个世界之外的距离的感知在缩放的世界中是不一样的。

获取有关数学的更多详细信息的相关问题：Why does order of transforms matter? rotate/scale doesn't give the same result as scale/rotate

在你的情况下：

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

* {
  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: translate(-320px, -180px) scale(0.9) ;
}

<div class="container">

</div>

数学将是：

|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

【讨论】：