이미지를 45도 회전하고 호버의 동일한 위치로 돌아옵니다.

Question

마우스를 올리면 이미지가 45도 회전하고 마우스를 올리면 원래 위치가됩니다.

내가 원했던 것은 원을 그리며 원래 위치로 돌아가고 싶습니다.

jquery에서 시도했지만, 여기에 뭔가 잘못되었습니다.

html로 코드 :

<ul class="assess-thumb-container"> 
    <li class="assess-thumb active"> 
     <img src="rex/assets/images/tests/eat.jpg" /> 
    </li> 
    <li class="assess-thumb"> 
     <img src="rex/assets/images/tests/diabetes.jpg" /> 
    </li> 
    <li class="assess-thumb"> 
     <img src="rex/assets/images/tests/CAT_logoSmall.png" /> 
    </li> 
    <li class="assess-thumb"> 
     <img src="rex/assets/images/tests/berlin.jpg" /> 
    </li> 
    <li class="assess-thumb"> 
     <img src="rex/assets/images/tests/smoking.jpg" /> 
    </li> 
    <li class="assess-thumb"> 
     <img src="rex/assets/images/tests/alcohol.jpg" /> 
    </li> 
</ul> 

JQuery와 코드 :

$('.assess-thumb').hover(function() { 
       $(this).css({ 
        "-webkit-transform" : "rotateY(45deg)", 
        "-webkit-transition" : "all .4s linear", 
        "-webkit-transform-origin" : "100% 100%", 
        "-webkit-transform-style" : "preserve-3d", 
        "-moz-transform" : "rotateY(45deg)", 
        "-moz-transition" : "all .4s", 
        "-moz-transform-origin" : "100% 100%", 
        "-moz-transform-style" : "preserve-3d", 
        "-ms-transform" : "rotateY(45deg)", 
        "-ms-transition" : "all .4s", 
        "-ms-transform-origin" : "100% 100%", 
        "-ms-transform-style" : "preserve-3d", 
        "transform" : "rotateY(45deg)", 
        "transition" : "all .4s", 
        "transform-origin" : "100% 100%", 
        "transform-style" : "preserve-3d" 
       }); 
       $(this).delay(400).queue(function() { 
        $(this).css({ 
         "-webkit-transform" : "rotateY(0deg)", 
         "-webkit-transition" : "all .4s linear", 
         "-webkit-transform-origin" : "100% 100%", 
         "-webkit-transform-style" : "preserve-3d", 
         "-moz-transform" : "rotateY(0deg)", 
         "-moz-transition" : "all .4s", 
         "-moz-transform-origin" : "100% 100%", 
         "-moz-transform-style" : "preserve-3d", 
         "-ms-transform" : "rotateY(0deg)", 
         "-ms-transition" : "all .4s", 
         "-ms-transform-origin" : "100% 100%", 
         "-ms-transform-style" : "preserve-3d", 
         "transform" : "rotateY(0deg)", 
         "transition" : "all .4s", 
         "transform-origin" : "100% 100%", 
         "transform-style" : "preserve-3d" 
        }); 
       }).dequeue(); 

Answer 1

보인다? 그렇다면 키 프레임 애니메이션을 사용할 수 있습니다.

@keyframes rotate { 
    0% { 
     transform: rotate(0deg); 
    } 
    50% { 
     transform: rotate(45deg); 
    } 
    100% { 
     transform: rotate(0deg); 
    } 
} 

.assess-thumb:hover { 
    animation: rotate 0.8s; 
} 

Answer 2

이유는 단지 CSS를 사용하지?

img:hover { 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
} 

또는 타이밍을 지정하려면 CSS 클래스로 만들고 jQuery를 사용하여 제 시간에 설정/제거하십시오.

CSS :

img.rotate { 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
} 

JS는 : 바로 유혹하는 동안 다시 모든 다음 회전은 회전 할과 같은

$("img").hover(function() { 
    var img = $(this); 
    img.addClass("rotate"); 

    setTimeout(function() { 
     img.removeClass("rotate"); 
    }, 400); 
});