画像を45度回転させて、ホバー上の同じ位置に戻ってください。

Question

ホバリング時に画像を45度回転させて、ホバーオフすると元の位置に戻ります。

私が望むのは、1つのホバー自体を回転させて元の位置に戻したいということです。

私は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); 
});