使用CSS转换放大<div>容器

Question

在项目bigpicture.js/live demo中,我在缩放时替换每个元素(通过移动它们,并改变它们的字体大小).有用.

现在我想测试CSS的漂亮transform: scale(...);功能.

在以下测试中,我想:

• <div id="container">用户点击时缩放整体.
• 用户CTRL +点击时缩小.

问题是无论我们点击哪里,缩放都以相同的方式完成. 如何缩放已被点击的点？(就像它已经与我目前的bigpicture.js实现一起工作).

var container = document.getElementById("container"), wrapper = document.getElementById("wrapper");
var zoom = 1;

wrapper.onclick = function (e) {
    zoom *= e.ctrlKey ? 1/1.2 : 1.2;    
    container.style.transform = "scale(" + zoom + ")";
}

<style>
#wrapper { position:absolute; top:0px; left:0px; width:1000px; height:600px; background-color: #AAAABB; }
#container { position:absolute; top:100px; left:100px; width:600px; height:400px; background-color: grey; transition-duration: 0.3s; }
#text { position:absolute; top:100px; left:100px; font-size:30px; }
</style>

<div id="wrapper">
  <div id="container">
    <div id="text">Test<div>
  </div>
</div>  

重要提示:您绝对需要通过"全页"来了解它的含义.

注意:我尝试了一些transform-origin不成功的事情.

Answer 1

这是一个工作片段：您可以尝试单击鹦鹉的眼睛，然后单击其他地方：它将始终以单击的点作为缩放的中心进行缩放。

var current = {x: 0, y: 0, zoom: 1}, c = document.getElementById('container');
window.onclick = function(e) {
  wx = current.x + e.clientX / current.zoom;
  wy = current.y + e.clientY / current.zoom;
  var coef = e.ctrlKey ? 0.5 : 2;
  current.zoom *= coef;    
  current.x = wx - e.clientX / current.zoom; 
  current.y = wy - e.clientY / current.zoom; 
  c.style.transform = 'scale(' + current.zoom +') translate(' + (-current.x) + 'px,' + (-current.y) + 'px)';
};

html, body { margin: 0; padding: 0; overflow: hidden; min-height: 100%; }
#container { position: absolute; transform-origin: 0 0;}
#item { position: absolute; left:0px; top:0px; }

<div id="container"><div id="item"><img src="https://i.stack.imgur.com/BRgdq.png"></img></div></div>