jquery - 将图像旋转 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

为什么不只使用 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);
});