如何使鼠標懸停平穩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？

回答

相關問題