将图像旋转 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 class 和 set/remove 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

你好像想让它在悬停的时候先旋转然后再旋转回来，对吧？如果是这样，您可以使用关键帧动画：

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

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

将图像旋转 45 度并在悬停时返回到相同位置

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

jquery

html

css

rotateanimation