Enlarge CSS <div> container

Question

In the bigpicture.js / live demo project , I replace every element when scaling (by moving them and changing the font size). He works.

Now I want to check the nice transform: scale(...); function transform: scale(...); CSS

In the following test, I would like to:

• scale the entire <div id="container"> when the user clicks.
• decrease when user CTRL + clicks.

The problem is that no matter where we click, scaling is done the same way. How to increase the point the link was clicked on? (as if it already works with my current implementation of 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> 

Important: you absolutely must go to the full page to understand what it is about.

Note. I tried several things with transform-origin , unsuccessfully.

Answer 1

Here's a working snippet: you can try by clicking on the eyes of a parrot, and then click elsewhere: it will always scale with the point pressed in the center of the zoom.

 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="http://i.stack.imgur.com/BRgdq.png"></img></div></div> 

Answer 2

You also need to apply the current scale to the screen coordinates:

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

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

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