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

【问题标题】：how to rotate image 90 digree on both direction如何在两个方向上将图像旋转 90 度
【发布时间】：2013-08-03 11:29:11
【问题描述】：

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

【问题讨论】：

请在问题中包含您尝试过的内容。
欢迎来到 SO！分享您尝试过的内容并具体说明您面临的确切问题是个好主意
你为什么不谷歌image processing或image rotation？或者向我们展示您尝试编写但失败的代码？
寻找 CSS3 变换和过渡。

标签： javascript jquery css animation jquery-animate

【解决方案1】：

您可以使用 CSS3 过渡和动画这是链接并去学习。 http://www.w3schools.com/css3/css3_transitions.asp

【讨论】：

【解决方案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 */

【讨论】：

感谢回复，但我不想以慢动作水平翻转
使用 {transform: rotateY(180deg);transition: 0.6s;}

【解决方案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

【讨论】：

感谢回复，但我想以慢动作水平翻转。
我已经更新了水平翻转的代码，让我知道这是否适合你