使用 translate 模拟变换原点

Posted 2023-03-06

【中文标题】使用 translate 模拟变换原点

【英文标题】：Simulating transform-origin using translate

【发布时间】：2018-12-07 05:25:31

【问题描述】：

我想在 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>

我已经尝试了很长一段时间没有运气的答案，在我看来它应该相对简单，我就是想不通。

【参考方案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属性如下：

从单位矩阵开始。

通过transform-origin的计算X和Y平移

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

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

【参考方案2】：

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

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

【讨论】：

但是为什么 MDN 引用说它是可能的呢？

因为它是。但是在更复杂的情况下为transforms 定义正确的值是有问题的。

查看其他答案。结果证明问题不大。