search

samuelmeuli / react-magnifier

🔍 React image zoom component
https://react-magnifier.samuelmeuli.com/
MIT License
153 stars 41 forks source link

Support for <Magnifier /> rotated by CSS #12

Open MatthewRorke opened 5 years ago

MatthewRorke commented 5 years ago

It would be extremely useful if there were some sort of support for allowing CSS transforms to still maintain its usability.

If you add a rotation style to the component (via className) to apply a rotational transformation, for every 90 degree, we find that x = -y && y = x

I have added a sample to the storybook: https://github.com/MatthewRorke/react-magnifier

Would it be possible for author to look into implementing this by translating the co-ordinates between X and Y correctly (perhaps based on a new property?) and to separate the mouseX and mouseY position in to its own part of the component state to ensure that the image and the mouse position are calculated correctly, but separately?

MatthewRorke commented 5 years ago

Just a P.S. that we love your module and the fact that it is always up to date. As a work around to this solution we are managing our image rotations on the serverside, which is less than ideal, and the above would be a fantastic long-term solution.

samuelmeuli commented 5 years ago

Hi Matthew, thanks for opening the issue! This feature would indeed be nice to have, I'll think about how this could best be implemented. And of course, a PR would be very welcome :)

mavrovgeorgi commented 2 years ago

Hi Matthew, hi Samuel, do you have any updates regarding this topic? Any information would appreciated. I am currently trying to rotate it with css rotate. Is it probably possible, if I extend the given custom styling? Thanks in advance! :)