使用翻译模拟转换原点

使用翻译模拟转换原点

您几乎不错，但是有两个错误。您需要反转翻译，并且需要更改

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 >  <div >  </div></div><div >  <div >  </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

：