旋转按钮[HTML][JS]

Rotate button [HTML] [JS]

本文关键字：JS 按钮 HTML 旋转      更新时间：2023-09-26

当用户按下按钮将对象旋转180莫尔时，如何使用javascript制作按钮？（针对我的网站）

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

我不知道怎么做。

简单的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";
}

您可以使用CSS3 rotate属性howthis:

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

演示：http://jsfiddle.net/1x84r9p6/

我建议使用Web动画API（chrome、firefox和opera都部分支持它）：

关于如何使用的最简单参考。

对于您的代码，这将做到：

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