CSS3, ZOOM + PAN (Google Map Style)

Question

I need a ZOOM AND PAN div element with CSS3
with the ability to mix zoom and pan,
so that you can, for example, zoom, pan, zoom, pan, zoom out, etc.

ZOOMING was SOLVED in this misconduct: CSS3 scaling on mouse cursor
with absolutely BRILLIANT answer! Here: CSS3 scaling on the mouse cursor

Now the question is: How to combine PANNING with ZOOMING (from the answer above)?

So far I have been trying to use jQuery UI draggable http://jqueryui.com/draggable/ for example:

<div id="graphics"> $("#graphics").draggable(); $("#graphics").draggable('enable'); 

but it “jumps” when I start dragging the image when I enlarge it.

I think that a good answer to this can be helped by a lot of people because it is a fairly basic functionality and there is no solution on the Internet that I could find after a fairly extensive search!

Answer 1

Solved it :) It was really amazingly simple! #graphics should have: "position: relative" instead of "position: absolute"