как повернуть изображение 90 digree на обоих направлениях

-5

Я очень пробовал себя, но решил свою проблему. Мой запрос: У меня есть изображение, я хочу повернуть это изображение как flip от начала до 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

Tnanks for repply but i wannt horizately flip in slow motion –

Используйте {transform: rotateY (180deg); переход: 0.6s;} –

Я не уверен, если это именно то, что вы после этого, но это сделать вращение.

Edit:

Мысль я бы разместить код здесь, чтобы увидеть, если это помогает вообще.

Я создал элементы так, как вы это делали, а затем просто использовал анимацию 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 для ответа, но я хочу сделать горизонтальный щелчок в замедленном темпе. –

Я обновил код, чтобы сделать горизонтальный щелчок, дайте мне знать, если это сработает для вас –

как повернуть изображение 90 digree на обоих направлениях

ответ

Смежные вопросы