css - 使用translate模拟transform-origin




css3 css-transitions (2)

你几乎不错,但你有两个错误。 您需要反转翻译,您需要更改第二个的 transform-origin

如果查看文档,您将看到用于转换原点的引用是元素的左上角,而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 属性计算的,如下所示:

  1. 从身份矩阵开始。

  2. 通过计算的变换原点的X和Y进行平移

  3. 由transform属性中的每个变换函数 从左到右 相乘

  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 的平移的需要:

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

根据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>

我已经尝试在没有运气的情况下寻找答案已经有一段时间了,在我看来它应该相对简单,我只是想不出来。


transform-origin 不能那么容易使用 transform: translate 模拟。 使用 transform-origin 可以更改变换中心,因此可以根据不同的点计算旋转和所有其他变换。

看一下 MDN的 示例,其中 transform-origin: 50px,50px 。 旋转元素位于虚线方形的下边缘下方,其值无法轻易计算。 当然,您可以使用 transform: translate 模拟 transform-origin transform: translate 需要针对特定​​的值组合计算值。





css-transforms