-5

私は自分自身から非常に苦労していますが、私の問題を解決しています。私のクエリは次のとおりです。この画像を回転させて、スローモーションで最初から 90 度に反転させ、同じ方法で 90 度に戻りたい画像があります。解決策を教えてください、どうすればいいですか？

ありがとうございます。

私はこのコードを使用しました

<style type='text/css'>
    .img {
    transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -khtml-transform: scale(-1, 1);
    -khtml-transform: scale(-1, 1);
    -khtml-transform:speed 5s;
  -khtml-transform:speed 5s; /* Safari */
  }
  </style>



   <script type='text/javascript'>//<![CDATA[ 
   $(window).load(function(){

  /*$('#image').mouseover(function(){
    $(this).addClass('img');
  }).mouseleave(function(){
    $(this).removeClass('img');
  });*/

  //setTimeout(addclass(),5000)
  setTimeout(function(){ addclass(); },5000);

  });//]]>  
  function addclass(){
    $("#add_remove").hide();


  $("#image").addClass('img');
  setTimeout(function(){ removeclass(); },5000);

  }

   function removeclass(){
    $("#add_remove").show();

   $("#image").removeClass('img');
   setTimeout(function(){ addclass(); },5000);

  }

  </script>


  </head>
  <body>
     <img id="image" src="robot_upper.png"/>

   </body>
4

3 に答える 3

0

CSS3 トランジションとアニメーションを使用できます。ここにリンクがあります。勉強してください。 http://www.w3schools.com/css3/css3_transitions.asp

于 2013-08-02T09:00:29.073 に答える
0

これがまさにあなたが求めているものかどうかはわかりませんが、これで回転が行われます。

編集：

ここにコードを投稿して、それがまったく役立つかどうかを確認したいと思いました。

あなたが行ったように要素を設定し、CSS アニメーションを使用して遷移を制御しました。

CSS:

/* defines the animation to be used, in this case I have called it 'waving', please note the browser pre-fixes are required for this to work cross browser */
@-webkit-keyframes waving {
  0%  {
    -webkit-transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(-90deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
  }
}
@-moz-keyframes waving {
  0%  {
    -moz-transform: rotate(90deg);
  }
  50% {
    -moz-transform: rotate(-90deg);
  }
  100% {
    -moz-transform: rotate(90deg);
  }
}
@-o-keyframes waving {
  0%  {
    -o-transform: rotate(90deg);
  }
  50% {
    -o-transform: rotate(-90deg);
  }
  100% {
    -o-transform: rotate(90deg);
  }
}
@keyframes waving {
  0%  {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

#image {
  -webkit-animation: waving 5s infinite; /* Safari 4+ */
  -moz-animation:    waving 5s infinite; /* Fx 5+ */
  -o-animation:      waving 5s infinite; /* Opera 12+ */
  animation:         waving 5s infinite; /* IE 10+ */
}

CodePen リンク

于 2013-08-02T11:36:34.360 に答える
0

これを時計回りと反時計回りに使用できます

transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Safari and Chrome */

と

 transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
于 2013-08-02T09:03:36.730 に答える