使用 translate 模拟变换原点

Question

我想模拟在 CSS中transform-origin使用的属性transform: translate。

根据 MDN，这很有可能：

通过首先通过属性的否定值转换元素，然后应用元素的转换，然后通过属性值转换来应用此属性。

但是，当我尝试时，我得到了错误的结果。这两个矩形显然不一样：

.origin {
  transform-origin: 100px 100px;
  transform: translate(100px, 0px) scale(2) rotate(45deg);
}

.translate {
  transform: translate(-100px, -100px) translate(100px, 0px) scale(2) rotate(45deg) translate(100px, 100px);
}

.box {
  background-color: red;
  width: 100px;
  height: 100px;
}

.container {
  float: left;
  margin: 100px;
  width: 250px;
  height: 250px;
  background-color: rgba(0, 0, 0, 0.1);
}

<div class="container">
  <div class="box origin">
  </div>
</div>

<div class="container">
  <div class="box translate">
  </div>
</div>

很长一段时间以来，我一直在尝试寻找没有运气的答案，在我看来它应该相对简单，我只是想不通。

Answer 1

你几乎很好，但你有两个错误。您需要反转翻译，并且需要更改transform-origin第二个翻译。

如果您查看文档，你会看到，参考使用翻译的原点是 左上角的元素的角落和改造的默认值起源center。所以我们需要对两者有相同的参考。

.origin {
  transform-origin: 50px 50px;
  transform:  rotate(45deg) scale(2);
}
.translate {
  transform-origin:0 0; 
  transform:translate(50px, 50px) rotate(45deg) scale(2) translate(-50px, -50px);
} 
.box {
  background-color: red;
  width: 50px;
  height: 50px;
}
.container {
  display: inline-block;
  margin: 30px;
  width: 150px;
  height: 150px;
  background-color: rgba(0,0,0,0.1);
}

<div class="container">
  <div class="box origin">
  </div>
</div>
<div class="container">
  <div class="box translate">
  </div>
</div>

这是来自规范：

变换矩阵是根据变换和 变换原点属性计算的，如下所示：

1. 从单位矩阵开始。

2. 通过transform-origin的计算X和Y进行平移

3. 从左到右乘以变换属性中的每个变换函数

4. 通过转换原点的否定计算 X 和 Y 值进行转换

你需要注意措辞！您可能会发现 MDN 与规范相矛盾，但事实并非如此，因为翻译元素（如 MDN 中所述）和翻译元素的原点或局部坐标（如规范中所述）之间存在差异）。

例如，将元素平移 -50px 相当于将其局部坐标（原点）平移 +50px。

您还需要注意“从左到右相乘”，因为它可能会造成混淆。如果我们在示例 3 中引用相同的规范，我们有：

div {
  height: 100px; width: 100px;
  transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
}

此变换将局部坐标系在 X 和 Y 方向上平移80 个像素，然后应用 150% 的比例，然后绕 Z 轴顺时针旋转 45°。对元素渲染的影响可以解释为以相反顺序应用这些变换：元素被旋转，然后缩放，然后平移。

因此，从左到右相乘并不意味着从左到右应用，这以某种方式解释了反转您用于模拟的翻译的需要transform-origin：