I want to incrementally rotate an image by 45 degrees one time, when the button was clicked, by using reactJs. But I have no clue how to do that. Can anyone give me some tips?
I want to incrementally rotate an image by 45 degrees one time, when the button was clicked, by using reactJs. But I have no clue how to do that. Can anyone give me some tips?
Share Improve this question edited Mar 15, 2017 at 19:46 Armenak 311 silver badge9 bronze badges asked Mar 15, 2017 at 19:32 D.KennyD.Kenny 1211 gold badge1 silver badge13 bronze badges 3- What specifically are you having problems with? Do you know how to handle click events? – Felix Kling Commented Mar 15, 2017 at 19:48
- Yes, I know how to handle click event. But I don't know how to rotate an image with 45 degree one click at a time. – D.Kenny Commented Mar 15, 2017 at 19:51
- I need a short example for this – D.Kenny Commented Mar 15, 2017 at 19:51
2 Answers
Reset to default 7You can keep the current rotation in the state of your ponent. And add an onClick handler which increments this by 45 at the time. Then use this variable in your render. Here is a quick codepen of how it could be implemented: https://codepen.io/anon/pen/YZrrWM
Just use CSS animations with transform: rotate(45deg);
Add that rule to a new CSS class, then use an event listener in JavaScript on the button that adds the transform to the image.