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

Question

在项目bigpicture.js / live demo中，我在缩放时替换每个元素（通过移动它们并更改其字体大小）。它有效。

现在我想测试CSS＆＃39;不错的transform: scale(...);功能。

在以下测试中，我想：

• 在用户点击时缩放整个<div id="container">。
• 用户CTRL +点击时缩小。

问题在于，无论我们点击 where ，缩放都以相同的方式完成。 如何缩放已点击的点 （就像它已经适用于我当前的bigpicture.js实现）。

＆＃13;

＆＃13;

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 + ")";
}

＆＃13;

<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>

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

重要提示：您绝对需要使用“完整页面”来了解它的含义。

注意：我尝试使用transform-origin进行了一些尝试，但未成功。

Answer 1

您还需要将当前缩放应用于屏幕坐标：

＆＃13;

＆＃13;

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

wrapper.onclick = function (e) {
    var x = e.clientX - container.getBoundingClientRect().left;
    var y = e.clientY - container.getBoundingClientRect().top;
    console.log(x,y)
    x /= zoom;
    y /= zoom;
    zoom *= e.ctrlKey ? 1/1.2 : 1.2;
    container.style.transform = "scale(" + zoom + ")";
    container.style.transformOrigin = x+"px "+y+"px";
    marker.style.top = (y-2)+'px';
    marker.style.left = (x-2)+'px';
}

＆＃13;

<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; }
#marker { position:absolute; width:4px; height:4px; background-color:red; }
</style>

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

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)';
};

＆＃13;

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; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;