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

Question

我实质上是在尝试制作一个非常简单的Google Maps克隆。

我的div上的布局相当复杂，我想对其进行缩放和拖动。 我正在使用Pep库进行拖放，并使用CSS transform: scale()进行缩放。

我的问题是， transform-origin应始终位于视口的中心。 比例尺默认设置为1很好，但是如果有所不同，它似乎就不起作用了。

我在codepen中有一个简化的测试用例，我在其中设置了一个小盒子来直观地表示transform-origin起点。 理想情况下，这应该始终保持在视口的中间。

Answer 1

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