Question

当用户按下它以旋转对象180莫尔时，如何使用javascript创建一个按钮？（对于我的网站）

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

我不知道该怎么做。

Answer 1

简单css3旋转和onclick事件： https://jsfiddle.net/xxarLyc6/

一个类并默认旋转：

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事件：

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

Answer 2

您可以使用CSS3 rotate属性：

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/

Answer 3

我建议使用Web Animations API（chrome，firefox和opera都支持它）：

Simplest Reference关于如何使用。

对于您的代码，这样做：

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

旋转按钮[HTML] [JS]

3 个答案: