悬停时,我将图像旋转 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();
最佳答案
为什么不只使用 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);
});
关于jquery - 将图像旋转 45 度并在悬停时返回到相同位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39072318/