使用 translate 模拟变换原点

Question

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

According to 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>

这里来自specification：

变换矩阵是从 transform 和 transform-origin属性如下：

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);
}

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

所以从左到右乘法并不意味着从左到右应用，这在某种程度上解释了需要反转你应用的翻译来模拟transform-origin：

Answer 2

transform-origin 无法使用transform: translate 轻松模拟。使用transform-origin 可以更改变换中心，因此旋转和所有其他变换都是基于不同的点计算的。

看看下面来自MDN 和transform-origin: 50px,50px 的例子。旋转元素低于虚线正方形的底部边缘，无法轻松计算。当然，您可以通过值模拟 transform-origin 和 transform: translate，这需要针对特定​​的值组合进行计算。