Search code examples
csszoomingtransformcss-transforms

Calculate transform-origin based on element positioning

I am trying to write an equation to re-calculate the transform-origin of a map when clicking on a particular key point using a combination of jQuery and the "transform-origin" CSS property.

To further clarify, I have a number of key points plotted on a map and would like to zoom into any given point by re-calculating the origin of my map based on the "left%" "top%" position coordinates of my key points.

My key points are absolutely positioned based on "left%" and "top%" and I am using the transform CSS property to scale the map x4 when clicking any given keypoint.

Any help figuring out this logic would be greatly appreciated.

Thank you.

Solution

  • i think its related to this: JavaScript Image zoom with CSS3 Transforms, How to calculate Origin? (with example) have a look

    with an useful answer right here: http://doctype.com/javascript-image-zoom-css3-transforms-calculate-origin-example