How to make HTML zoomable.

Question

I want to be able to zoom in/out of my HTML page to focus on certain things (via pinching) like webpages do, but I am having difficulty.
How would this be done on an HTML page? I have looked for some answers already but none seem to answer this question...

Also, if a page aspect was 20px would zooming in widen the picture/ aspect?

Answer 1

Some CSS properties can be used.

Apply this to an element to scale it up to 5 times its original size:
transform: scale(5);

JavaScript can control vertical and horizontal scroll position. This can be useful if you want to expand everything and scroll to a particular element of interest. You can also include a translate in your transform value to shift the zoomed content around.

If you want to get position of an element relative to the page, I would include jquery and use jquery's offset() method for its top and left results. This could be useful for determining where to scroll or translate to.

Run the following in your browser's JavaScript console to get a taste of what I'm suggesting:
document.querySelector('body').style.transition = 'transform 2s';
document.querySelector('body').style.transform = 'scale(3) translate(200px, -100px)';