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 に答える