Rotate a image 45 degree and come back to the same position on hover

Question

On hover I am rotating a image to 45 degree and hover off it will come to original position.

What I want is I want to rotate and come back to original position on one hover itself.

I tried in jquery, But something is wrong here.

Html Code:

<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 Code:

$('.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

Why not use just css?

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

Or if you want to do it with a timing, make it a css class and set/remove it on time with 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);
});

Answer 2

It seems like you want it to rotate and then rotate back all while hovering right? If so you could use keyframe animations:

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

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