javascript - Rotate button [HTML] [JS] - Stack Overflow

admin管理员组

文章数量:1393117

how to make a button with javascript when the user presses it to rotate an object 180 moires? (for my site)

<input type="button" value="button">

I have no idea how to do it.

how to make a button with javascript when the user presses it to rotate an object 180 moires? (for my site)

<input type="button" value="button">

I have no idea how to do it.

• javascript
• html

Share Improve this question Follow asked Apr 7, 2015 at 14:02 tunesoltunesol 1511 silver badge44 bronze badges 1

• stackoverflow./questions/19799846/… – mmmmmpie Commented Apr 7, 2015 at 14:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Simply css3 rotate and onclick event: https://jsfiddle/xxarLyc6/

One class and default rotate:

div{
  -ms-transform: rotate(0deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  transform: rotate(0deg);
}
.rotated{
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}

Javascript onclick event for button:

var button=document.getElementById("button");
button.onclick=function(){
  document.getElementById("torotate").className = "rotated";
}

You can use the CSS3 rotate property how this:

HTML:

<input type="button" value="button" id="button">

CSS:

.rotate-180 { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); }

JS:

$("#button").click(function(){
   $(this).toggleClass("rotate-180");
})

DEMO: http://jsfiddle/1x84r9p6/

I would suggest using the Web Animations API (chrome, firefox, and opera all partially support it):

Simplest Reference on how to use.

For your code this would do:

element.animate([{transform: "rotate(0deg)"}, {transform: "rotate(100deg)"}], {duration: 2000});

本文标签： javascriptRotate button HTML JSStack Overflow