这是我的代码的 fiddle - https://jsfiddle.net/agon024/o9sa7nyh/5/
:hover{
transform: perspective(800px) rotateY(25deg);
transition-timing-function: ease-in;
transition: all, 0.5s;
}
我想做的是让我的 div 元素旋转 25 度或 -25 度，具体取决于您是悬停在图像的左侧还是右侧。
正如您在 fiddle 上看到的那样，当您将鼠标悬停在它上面时只需旋转 25 度。我怎样才能用 jQuery 做到这一点？我发现这个 fiddle ( http://jsfiddle.net/HeFqh/11/ ) 与我正在寻找的东西相似(就无缝过渡而言，但我需要它来旋转 Y。
非常感谢任何帮助
最佳答案
你可以这样做:
$( ".billMurray img" ).mousemove(
function(e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
if(relativeX< $(this).width()/2) {
$( this ).addClass( "hover-left" );
$( this ).removeClass( "hover-right" );
$(this).removeClass('start');
}
else {
$( this ).addClass( "hover-right" );
$( this ).removeClass( "hover-left" );
$(this).removeClass('start');
}
}
);
$( ".billMurray img" ).mouseleave(function(){
$( this ).removeClass( "hover-right" );
$( this ).removeClass( "hover-left" );
$(this).addClass('start');
});
所以，想法是:找到左右鼠标位置(首先获得中心):https://css-tricks.com/snippets/jquery/get-x-y-mouse-coordinates/图像，并添加和删除适当的类。 “开始”类存在是因为当鼠标离开图像时无缝过渡...
DEMO，CSS 略有修改: https://jsfiddle.net/o9sa7nyh/6/
关于javascript - jQuery - rotateY 取决于元素向右或向左悬停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40579283/