将图像旋转45度，然后返回到悬停时的相同位置

问题描述：

悬停时，我将图像旋转到45度，然后将鼠标悬停在原始位置。将图像旋转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();

答

好像你想让它旋转，再旋转回来都盘旋而正确的？如果是这样，你可以使用关键帧动画：

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

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

答

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

将图像旋转45度，然后返回到悬停时的相同位置

相关推荐