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

-5

我非常想从我自己，但解决我的问题。我的查询是：我有一个图像我想旋转此图像作为慢动作从开始到90度翻转，并从90度相同的方式回来。请让我知道解决方案，我该怎么办？如何旋转图像90 digree在两个方向

谢谢先进。

我用这个代码

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

来源

2013-08-02 shivraj sharma

请包括你在你的问题都试过了。 –

欢迎来到SO！它是一个好主意，分享你已经尝试过，并指定你面对的确切问题 – Ani

为什么你不谷歌'图像处理'或'图像旋转'？或向我们展示您尝试编写和失败的代码？ –

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

来源

2013-08-02 09:00:29

您可以使用此为顺时针和逆时针

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-02 09:03:36

Tnanks for repply，但我wannt horizately翻转慢动作 –

使用{transform：rotateY（180deg）; transition：0.6s;} –

我不知道如果这正是你追求但这并做旋转。

编辑：

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

我已经设置好了元素，然后使用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

来源

2013-08-02 11:36:34

Thankanks的答复，但我想让水平翻转慢动作。 –

我更新了水平翻转的代码，让我知道这是否适合您 –

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

回答

相关问题