Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for <Magnifier /> rotated by CSS #12

Open
MatthewRorke opened this issue Aug 19, 2019 · 3 comments
Open

Support for <Magnifier /> rotated by CSS #12

MatthewRorke opened this issue Aug 19, 2019 · 3 comments
Labels
enhancement New feature or request

Comments

@MatthewRorke
Copy link

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
Copy link
Author

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
Copy link
Owner

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 :)

@samuelmeuli samuelmeuli added the enhancement New feature or request label Aug 19, 2019
@mavrovgeorgi
Copy link

mavrovgeorgi commented Jan 18, 2022

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! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants