使用翻译模拟转换原点 [英] Simulating transform-origin using translate

问题描述

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

I want to simulate the properties of transform-origin using transform: translate in CSS.

根据MDN ，这非常可能:

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

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.

但是，当我尝试时，会得到不正确的结果.这两个矩形显然不相同:

However, when I try, I get incorrect results. These two rectangles are clearly not the same:

.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>

我已经尝试了很长时间没有运气了，在我看来，这应该是相对简单的，我只是想不通.

I have tried looking for the answer without luck for quite some time now, and in my mind it should be relatively simple, I just can't figure it out.

推荐答案

您几乎不错，但有两个错误.您需要反转翻译，并且需要更改第二个翻译的transform-origin.

You are almost good but you have two errors. You need to invert the translations and you need to change the transform-origin of the second one.

如果您查看文档，将会发现用于翻译原点的参考是元素的左上角角，并且变换原点的默认值为center.因此，我们需要为两者提供相同的参考.

If you check the documentation, you will see that the reference used to translate the origin is the top left corner of the element and the default value of transform origin is center. So we need to have the same reference for both.

.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>

此处来自规范:

Here is from the specification:

转换矩阵是根据 transform 和 transform-origin 的属性如下:

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

1. 从单位矩阵开始.

1. Start with the identity matrix.

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

Translate by the computed X and Y of transform-origin

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

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

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

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

您需要注意措辞！您可能会发现MDN与规范相矛盾，但事实并非如此，因为翻译元素(如MDN中所述)与翻译元素的原点之间存在差异或本地坐标(如规范中所述).

You need to pay attention to the wording! You may find that the MDN is contradictory with the specification BUT it's not the case simply because there is a difference between translating the element (like described in the MDN) and translating the origin of the element or the local coordinate (like described in the specification).

例如，将元素平移-50px等效于将其局部坐标(原点)平移+ 50px.

For example, translating the element by -50px is equivalent to translating its local coordinate (origin) by +50px.

您还需要注意从左到右相乘" ，因为这可能会造成混乱.如果我们在示例3中引用相同的规范，我们将:

You need to also pay attention to the "Multiply from left to right" as it may create confusion. If we refer to the same specification in the Example 3 we have:

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

此转换将本地坐标系统转换为 80 X和Y方向上的像素，然后应用150％的比例，然后 绕Z轴顺时针旋转45°. 对 元素的呈现可以解释为这些元素的应用 逆向变换:先旋转元素，然后缩放比例， 然后翻译.

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而应用的翻译的必要性:

So multiplying from left to right doesn't mean applying from left to right which somehow explain the need of inverting the translation you applied to simulate the transform-origin:

这篇关于使用翻译模拟转换原点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！