使用 translate 模拟 transform-origin

Question

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

This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.

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

.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 不能用 transform: translate 来模拟。使用 transform-origin 您可以更改变换的中心，因此旋转和所有其他变换都是根据不同的点计算的。

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

Answer 2

你差不多好了，但有两个错误。您需要反转翻译，并且需要更改第二个的 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:

The transformation matrix is computed from the transform and transform-origin properties as follows:

Start with the identity matrix.

Translate by the computed X and Y of transform-origin

Multiply by each of the transform functions in transform property from left to right

Translate by the negated computed X and Y values of transform-origin

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

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

您还需要注意 "Multiply from left to right"，因为它可能会造成混淆。如果我们在示例 3 中引用相同的规范，我们有：

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

This transformation translates the local coordinate system by 80 pixels in both the X and Y directions, then applies a 150% scale, then a 45° clockwise rotation about the Z axis. The impact on the rendering of the element can be intepreted as an application of these transforms in reverse order: the elements is rotated, then scaled, then translated.

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

使用 translate 模拟 transform-origin

Simulating transform-origin using translate

css

css-transitions

css-transforms