使用Javascript，如何相对于视口中心缩放元素？

Question

我本质上是想制作一个非常简单的谷歌地图克隆。

我有一个格式相当复杂的div，我想缩放和拖动它。我正在使用Pep库进行拖放，并使用CSS transform: scale()进行缩放。

我的问题是transform-origin点应该始终是视口的中心。当刻度处于默认级别1时，它很好，但是当它不同时，它似乎不起作用。

我有一个简化的测试用例in a codepen，我将一个小方框设置为transform-origin点的直观表示。理想情况下，这应该始终保持在视口的中间。

Answer 1

如果仍有问题： 您必须计算从视口点到左上角的移位，缩放和向后移位，或者换句话说缩放视口。 否则您正在从旧视口或原点缩放。 如果你愿意我可以在没有视口的情况下重写它。