如何使鼠标悬停平稳rotate3d？

如何进行平滑过渡当鼠标进入或离开盒子区域时，我会得到一个代码，但是当我的鼠标从盒子区域出来并从另一侧进入盒子时，元素转换不平滑。如何使鼠标悬停平稳rotate3d？

代码：fiddle

$(document).ready(function() { 
var $one = $('#div1'), 
    $two = $('#div2'), 
    browserPrefix = "", 
    usrAg = navigator.userAgent; 
if(usrAg.indexOf("Chrome") > -1 || usrAg.indexOf("Safari") > -1) { 
    browserPrefix = "-webkit-"; 
} else if (usrAg.indexOf("Opera") > -1) { 
    browserPrefix = "-o"; 
} else if (usrAg.indexOf("Firefox") > -1) { 
    browserPrefix = "-moz-"; 
} else if (usrAg.indexOf("MSIE") > -1) { 
    browserPrefix = "-ms-"; 
} 

$(document).mousemove(function (event) { 
    var cx = Math.ceil(window.innerWidth/2.0), 
     cy = Math.ceil(window.innerHeight/2.0), 
     dx = event.pageX - cx, 
     dy = event.pageY - cy, 
     tiltx = (dy/cy), 
     tilty = - (dx/cx), 
     radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2)), 
     degree = (radius * 15); 

     shadx = degree*tiltx; /*horizontal shadow*/ 
     shady = degree*tilty; /*vertical shadow*/ 

    $one.css(browserPrefix + 'transform', 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)'); 
    $two.css(browserPrefix + 'transform', 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)'); 



    if(dx>cx) /*without that horizontal values are reversed*/ 
     $('#div1, #div2').css('box-shadow', + (-shady) + 'px ' + (-shadx) +'px 5px #3D352A'); 
    else $('#div1, #div2').css('box-shadow', + shady + 'px ' + (-shadx) +'px 5px #3D352A'); 
});});

来源

2015-10-13 Riantori

你的小提琴似乎完好（在Chrome）;我无法看到你描述的问题。由于mousemove正确连接到文档应该没有任何问题。除非你正在测试一些劣质的浏览器。 – Ingmars

我在Chrome和Firefox上测试过，它的工作原理，你能澄清你想要做什么吗？ – Mimouni

我觉得OP意味着，现在，如果你慢慢移动你的鼠标，你可以看到翻译/旋转越来越少跳更新，但他/她想要更顺利，我认为你的限制因素是如何经常发生 –

如果我理解正确，OP的问题是，如果你离开与鼠标的jsfiddle的“结果”面板在一侧，四处div和来自其他输入一遍那么旋转会立即跳转到新的位置，而不会进行任何转换。

您在拨弄了一个错误，在包装的ID是在html id="#wrapper"。

编辑：我的第二个解决方案有一些错误，mousemove事件可以比css过渡结束更快地触发，并导致元素在某些浏览器中来回跳转。

fiddle with JS only solution这是我的最终解决方案。

I throttled mousemove事件发生的频率较低。然后计算新旧鼠标位置之间的几个步骤，并延迟渲染转换，直到mousemove事件再次触发。

一种方式throttling事件是在这stackoverflow answer。

我在JS之前做过这个。过渡似乎非常顺利，但除非出现跳跃问题，否则不能超过0.2秒。

fiddle with solution 3

fiddle with solution 1

我添加了一个默认的中心位置为2个的div，当你离开视他们将回到这一点。虽然鼠标位于视口上方，但过渡更快，所以即使mousemove事件不连续发射，旋转也应该平滑。

请注意，虽然有一些错误，但更快地移动鼠标可以使div在Firefox中来回跳动。

CSS：

#wrapper { 
    width: 100%; 
    height: 90vh; 
} 

#wrapper:hover #div1, 
#wrapper:hover #div2 { 
    transition: transform 0.05s linear, box-shadow 0.05s linear; 
} 

#div1, 
#div2 { 
    transform: rotate3d(0,0,0,0deg); 
    box-shadow: 0 0 5px #3D352A; 
    transition: transform 0.3s linear, box-shadow 0.3s linear; 
}

JS：

$(document).mouseleave(function (event) { 
    $one.removeAttr('style'); 
    $two.removeAttr('style'); 
});

（我没有包括在CSS的供应商前缀也解决了包装的高度的东西，你需要在最终产品中，小提琴的90vh更好。）

如果你不喜欢这样的div返回到中心：

fiddle with solution 2

CSS：

.mouse-enter #div1, 
.mouse-enter #div2 { 
    transition: transform 0.2s linear, box-shadow 0.2s linear; 
}

JS：

$(document).mouseenter(function (event) { 
    $('#wrapper').addClass('mouse-enter'); 
    setTimeout(function(){ $('#wrapper').removeClass('mouse-enter'); }, 400); 
});

您可能要保存上次鼠标位置鼠标离开前，无论是作为在JS变量或作为#wrapper数据属性。然后，在鼠标中计算旧位置和新位置之间的几个变换步骤，并将它们依次添加到2个div。可能是一个更好的解决方案，与我的解决方法相比，可能出现的错误更少。

来源

2015-10-13 21:31:20 shirfy

嗨，我喜欢你的解决方案，但是当我尝试的解决方案2，疗法仍然有一些跳跃和当轮换更新时有点延迟， – Riantori

你说得对，我很快就会更新我的答案，我想出了一些解决方案。 – shirfy

真棒，..谢谢@shirfy – Riantori

<div></div> 
     <style> 
div { 
    width: 200px; 
    height: 100px; 
    background-color: yellow; 
    transition: all 1s; 
     } 

div:hover{ 
     -moz-transform: rotate(7deg); 
    -o-transform: rotate(7deg); 
    -webkit-transform: rotate(7deg); 
    transform: rotate(180deg); 
     } 
    </style>

来源

2015-10-17 11:05:05

这将工作没有jquery顺利旋转 –

如何使鼠标悬停平稳rotate3d？

回答

相关问题