时间戳

首页 > 解决方案 > 理解 CSS 变换中的缩放后翻译

css - 理解 CSS 变换中的缩放后翻译

问题描述

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

有人对此有任何解释吗？

标签： csscss-transforms

解决方案

由于翻译是在它之后完成的，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获取完整的公式。这是一个相关的问题：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 |

We will get:

Xf =  0.9*Xi + 0.9*(A - 50%) + 50%;
Yf =  0.9*Yi + 0.9*(B - 50%) + 50%;

We need to keep the element on the top left so for (Xi,Yi) = (0,0) we need to also get (Xf,Yf) = (0,0)

0 = 0.9*(A - 50%) + 50%;
A = 50%*(0.9 - 1)/0.9 
A = 50%*-0.111111

And 50% = 6400px/2 = 3200px then A = -355.52px

Same logic for B to get -200px

For the opposite order we will have:

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

推荐阅读