了解 CSS 变换中的缩放后翻译

Question

我的 div 尺寸为 6400x3600。我正在使用 transform-origin: 50% 50%。当我将比例设置为 0.9 时，为了让 children 保持在左上角，我需要将其转换为负值。我的推理是 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>

有人对此有任何解释吗？

Answer 1

由于翻译是在 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

* {
  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 以获得完整的公式。这是一个相关的问题：

所以全矩阵乘法会变成：

|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

了解 CSS 变换中的缩放后翻译

Understanding translate after scale in CSS transforms

css

css-transforms