양방향으로 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

왜 '이미지 처리'또는 '이미지 회전'을 google하지 않습니까? 또는 작성하고 실패한 코드를 알려주십시오. –

당신은 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

Repply에 대한 Tanks하지만 느린 동작으로 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

회신을위한 Thnanks하지만 나는 슬로우 모션으로 horizatal 플립을 만들고 싶습니다. –

나는 수평 반전을하기 위해 코드를 업데이트했다. –

양방향으로 90 digree 이미지를 회전하는 방법

답변

관련 문제