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

【问题标题】：Using Javascript, how can I scale an element relative to the center of a viewport?使用 Javascript，如何相对于视口的中心缩放元素？
【发布时间】：2013-10-02 11:14:52
【问题描述】：

我实际上是在尝试生成一个非常简单的 Google 地图克隆。

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

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

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

【问题讨论】：

标签： javascript jquery css geometry transform

【解决方案1】：

如果这仍然是悬而未决的问题：您必须计算从视口点到左上角的偏移，缩放和向后移动，或者换句话说，缩放视口。否则，您将从旧视口或原点缩放。如果你喜欢我可以在没有视口的情况下重写它。

【讨论】：

嗨 EvilJS。谢谢，我已经设法为我的特定用例解决了这个问题。
@JodiWarren 介意在这里分享您的解决方案吗？
@ThorbenCroisé 我最初是在大约 8 年前发布的，恐怕我没有内存（或代码）可以参考。我很抱歉，我讨厌看到那些模糊的信息，我很尴尬留下了一个。