Zoom on a <div> container with CSS transform

Question

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

Now I want to test CSS' nice transform: scale(...); feature instead.

In the following test, I would like to :

• zoom the whole <div id="container"> when user clicks.
• zoom out when user CTRL+clicks.

The problem is that regardless where we click, the zoom is done the same way. How to zoom on the point that has been clicked instead? (like 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 need to go Full Page to understand what it is about.

Note: I tried a few things with transform-origin, unsuccessfuly.

Answer 1

You need also to apply out your current zoom to screen coords:

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>