如何更改css转换原点，但保留转换

这个问题的更大的图片是我有一个转换的地图需要响应触摸手势，它需要从用户手势的中心缩放和旋转。如何更改css转换原点，但保留转换

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

或者如果有一种方法可以在改变变换原点的同时使用矩阵变换来保存变换？

2016-11-22 njorlsaga

没有一个能够重现问题的实际代码片段，这是一个太宽泛的问题。 – LGSon

我不同意，问题是具体的，如何改变任意旋转，缩放和平移元素的变换原点，但保留原始变换。 – njorlsaga

我相信有很多方法可以实现这个目标，但这听起来像是你在正确的轨道上。我创建了一个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; 
}

我不知道这将如何表现更复杂的转换，但它似乎与简单的工作正常。

来源

2016-11-22 18:27:03

这很有趣，你能解释一下那里的负面情况，然后看看为什么需要这么做吗？它也看起来像值是变换的起源的三角洲是正确的？ – njorlsaga

也有兴趣如何，如果你也已经对原单翻译这会工作（这是我的情况） – njorlsaga

还因为变换的操作顺序是从右到左，负的翻译中出现最后的吧？ – njorlsaga

如何更改css转换原点，但保留转换

回答

相关问题