相关疑难解决方法(0)

我想模拟在 CSS中transform-origin使用的属性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>

很长一段时间以来，我一直在尝试寻找没有运气的答案，在我看来它应该相对简单，我只是想不通。

在梳理了SVG 规范以及诸如此类的指南之后，我仍然在努力理解链接变换的工作原理。

精选相关报价

\n

When you apply the transform attribute to an SVG element, that element\n gets a "copy" of the current user coordinate system in use.

\n

And:

\n

When transformations are chained, the most important thing to be aware\n of is that, just like with HTML element transformations, each\n transformation is applied to the coordinate system after that system\n is transformed by the previous transformations.

\n

And: …