1

这是代码：

45°看到我每次单击按钮时都需要它来旋转它：0 到 45 - 45 到 90 - 90 到 135 等等等等，并且无限。

如果你们帮助我，那就太棒了。

<style type="text/css">
.classname {
-webkit-animation-name: cssAnimation;
-webkit-animation-duration:0.7s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
0% { -webkit-transform:scale(1) rotate(0deg); }
95% { -webkit-transform:scale(1) rotate(46deg); }
100% {-webkit-transform:scale(1) rotate(45deg); }
}

</style>
  <script type="text/javascript">
       function ani(){
            document.getElementById('img').className ='classname';
        }
  </script>
<title>Untitled Document</title>
</head>

<body align="center">

 <form  type="button" onclick="ani()"  style="position:relative;z-index:2" name="img" >

<img  src="2.png" width="645" height="545" style="position:absolute;left:26.9%;top:-8%;z-index:1;"/>

4

1 回答 1

0

这不是一个完全有效的解决方案，主要是因为它不知道当旋转超过 180 度时如何处理。你必须弄清楚：

$("button").click(function() {
    var matrix = $("img").css("-webkit-transform");
    var values = matrix.split('(')[1].split(')')[0].split(',');
    var a = values[0];
    var b = values[1];
    var current = Math.round(Math.atan2(b, a) * (180 / Math.PI));
    var newz = current + 45;
    $("img").css("-webkit-transform", "rotate(" + newz + "deg)");
});​

http://jsfiddle.net/charlescarver/tvQNH/

于 2012-11-18T00:23:04.257 回答