CSS3 zooming on mouse cursor

Question

My goal is to create a plugin that enables zooming & panning operations on a page area, just like how Google Maps currently works (meaning: scrolling with the mouse = zo

Answer 1

We made a react library for this: https://www.npmjs.com/package/react-map-interaction

It handles zooming and panning and works on both mobile and desktop.

The source is fairly short and readable, but to answer your question here more directly, we use this CSS transform:

const transform = `translate(${translation.x}px, ${translation.y}px) scale(${scale})`;
const style = {
    transform: transform,
    transformOrigin: '0 0 '
};

// render the div with that style

One of the primary tricks is properly calculating the diff between the initial pointer/mouse down state and the current state when a touch/mouse move occurs. When the mouse down occurs, capture the coordinates. Then on every mouse move (until a mouse up) calculate the diff in the distance. That diff is what you need to offset the translation by in order to make sure the initial point under your cursor is the focal point of the zoom.