[英]Rotate button [HTML] [JS]
how to make a button with javascript when the user presses it to rotate an object 180 moires? 当用户按下javascript将对象旋转180波纹时,如何制作带有javascript的按钮? (for my site) (对于我的网站)
<input type="button" value="button">
I have no idea how to do it. 我不知道该怎么做。
Simply css3 rotate and onclick event: https://jsfiddle.net/xxarLyc6/ 只需CSS3旋转和onclick事件: 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: 按钮的Javascript onclick事件:
var button=document.getElementById("button");
button.onclick=function(){
document.getElementById("torotate").className = "rotated";
}
You can use the CSS3 rotate property how this: 您可以通过以下方式使用CSS3旋转属性:
HTML: HTML:
<input type="button" value="button" id="button">
CSS: CSS:
.rotate-180 { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); }
JS: JS:
$("#button").click(function(){
$(this).toggleClass("rotate-180");
})
DEMO: http://jsfiddle.net/1x84r9p6/ 演示: http : //jsfiddle.net/1x84r9p6/
I would suggest using the Web Animations API (chrome, firefox, and opera all partially support it): 我建议使用Web动画API(chrome,firefox和Opera均部分支持它):
Simplest Reference on how to use. 有关如何使用的最简单参考 。
For your code this would do: 对于您的代码,这可以做到:
element.animate([{transform: "rotate(0deg)"}, {transform: "rotate(100deg)"}], {duration: 2000});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.