Question

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

首先通过使用属性的取反值转换元素，然后应用元素的变换，然后通过属性值进行转换，来应用此属性。

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

.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 的属性如下：



从单位矩阵开始。



通过计算的变换原点的X和Y进行翻译



乘以，将转换属性中的每个转换函数从   从左到右



按求反的计算的transform-origin的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。

使用翻译模拟转换原点

2 个答案: