css - 如何更改 css transform-origin 但保留转换

Question

这个问题的大局是我有一个需要响应触摸手势的转换 map ，它需要从用户手势的中心缩放和旋转。

transform-origin 需要在每个新手势上改变但不改变旋转和缩放，基本上我想添加一个平移来补偿 transform-origin 的变化？

或者是否有一种方法可以在更改变换原点的同时使用矩阵变换来保留变换？

Answer 1

我确信有很多方法可以实现这一点，但听起来您的方向是正确的。我创建了一个 codepen demo对其进行原型(prototype)设计，似乎诀窍是在翻译的开头添加负偏移量，然后在末尾添加正偏移量。

.box {
    transform: rotateX(45deg) scale(1.4);
    transform-origin: 10px 10px;
}

.box.is-active {
    transform: translate(-50px, -50px) rotateX(45deg) scale(1.4) translate(50px, 50px);
    transform-origin: 60px 60px;
}

我不确定这对于更复杂的转换会如何表现，但它似乎适用于简单的转换。