CODEWITHSUNDEEP
javascripthtml
tunesol
tunesol

Reputation: 15

Rotate button [HTML] [JS]

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.

Upvotes: 0

Views: 9964

Answers (3)

Edwin Reynoso
Edwin Reynoso

Reputation: 1541

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});

Upvotes: 0

oscarvady
oscarvady

Reputation: 450

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.net/1x84r9p6/

Upvotes: 0

Jackenmen
Jackenmen

Reputation: 197

Simply css3 rotate and onclick event: https://jsfiddle.net/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";
}

Upvotes: 4

Related Questions