-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

您可以将其用于顺时针和逆时针

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 回答
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 回答