javascript - How to rotate an image with 45 degrees by using reactJs - Stack Overflow

admin管理员组

文章数量:1339774

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?

• javascript
• reactjs

Share Improve this question Follow edited Mar 15, 2017 at 19:46 Armenak 3111 silver badge99 bronze badges asked Mar 15, 2017 at 19:32 D.KennyD.Kenny 12111 gold badge11 silver badge1313 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You 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.

本文标签： javascriptHow to rotate an image with 45 degrees by using reactJsStack Overflow