如何旋轉圖像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在兩個方向

回答

相關問題