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.
-
stackoverflow.com/questions/19799846/…mmmmmpie– mmmmmpie2015-04-07 14:23:54 +00:00Commented Apr 7, 2015 at 14:23
Add a comment
|
3 Answers
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";
}
Comments
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");
})
Comments
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});
