Is there a way to rotate a div using the scroll event?

Question

I want something to rotate in both directions(as scroll goes up and down), but the rotation must be smooth and the rotation value must be equal with the scroll distance.(i was thinking at something that could check how many px do I scroll in one way, and somehow convert them in deg to make the rotation)(forgive me but I am not sure how to descrive this)

Answer 1

🍇 Alex Tușinean 💜 check the following code,

https://code.sololearn.com/WLN5K970lrEM/?ref=app

Answer 2

🇧🇩🇳‌🇴‌🇷‌'🇼‌🇪‌🇸‌🇹‌🇪‌🇷‌ that is what i was trying to do.

//sorry, i meant y, not x Abhay

Answer 3

https://code.sololearn.com/WJ5yPgBS6Uyd/?ref=app

This'll work on touch devices

Answer 4

Abhay editted your code a bit

https://code.sololearn.com/WC0lTYJ5EuQa/?ref=app

Answer 5

x position or y position?

Answer 6

Abhay yes, but the scroll position shall stay the same while only the rotation changes.

Answer 7

🍇 Purpura S 💜 sorry i still don't understand , can you provide more details ! Or you can change my code according to what you want !

Answer 8

🍇 Alex Tușinean 💜 what do you mean by scrolling the same element that has to rotate? You mean that scroll should be applied on the element that is rotating ?

Also you can make a button that after click will stop the rotation on specific axis then rotate on other axis , nothing difficult about it !

Answer 9

https://code.sololearn.com/W0m6RVbWXdaQ/?ref=app

Answer 10

🇧🇩🇳‌🇴‌🇷‌'🇼‌🇪‌🇸‌🇹‌🇪‌🇷‌ Abhay these solutions are good. But now, how could I scroll the same element that has to rotate? The actual scrolll (up and down) should change the rotation instead of the x position. I don't know if that is possible. Like locking the scroll on x, then rotating.