Question

我非常努力，但解决了我的问题。我的查询是：我有一个图像我想旋转这个图像从慢动作开始翻转到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>

Answer 1

您可以使用CSS3 Transition和Animation 这是链接和去研究。 http://www.w3schools.com/css3/css3_transitions.asp

Answer 2

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

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 */

Answer 3

我不确定这是否正是你所追求的，但这确实是在旋转。

编辑：

以为我会在这里发布代码，看它是否有帮助。

我已经像你一样设置了元素，然后只使用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 Link

如何在两个方向上旋转图像90度

3 个答案: