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);
});

Answer 2

好像你希望它旋转然后在向右旋转时向后旋转？如果是这样，您可以使用关键帧动画：

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

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

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

2 个答案: