如何更改css转换原点,但保留转换
问题描述:
这个问题的更大的图片是我有一个转换的地图需要响应触摸手势,它需要从用户手势的中心缩放和旋转。如何更改css转换原点,但保留转换
变换原点需要在每个新手势上都改变,但不改变旋转和缩放比例,基本上我想添加一个平移来补偿变换原点的变化?
或者如果有一种方法可以在改变变换原点的同时使用矩阵变换来保存变换?
答
我相信有很多方法可以实现这个目标,但这听起来像是你在正确的轨道上。我创建了一个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;
}
我不知道这将如何表现更复杂的转换,但它似乎与简单的工作正常。
没有一个能够重现问题的实际代码片段,这是一个太宽泛的问题。 – LGSon
我不同意,问题是具体的,如何改变任意旋转,缩放和平移元素的变换原点,但保留原始变换。 – njorlsaga