將圖像旋轉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); 
});