Поверните изображение на 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); 
});