使用翻译模拟转换原点

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>

这是从规范：

转换矩阵是根据 transform 和 transform-origin 属性计算的，如下所示：

1. 从身份矩阵开始。

2. 通过计算的变换原点的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：