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

Question

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

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

或者，如果有一种方法可以在更改transform-origin时使用矩阵变换来保留变换？

Answer 1

我确定有很多方法可以实现这一目标，但听起来你似乎正走在正确的轨道上。我创建了一个codepen demo来对其进行原型设计，看起来诀窍就是在开始时添加一个负偏移量，然后在结尾处添加一个正偏移量。

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

我不确定这会如何通过更复杂的转换来表现，但它似乎可以用简单的转换工作。