3D過渡的jQuery動畫

Question

我實際上試圖為3D菜單創建鼠標懸停時使用CSS3變換和jquery動畫的動畫。

這是我的第一個工作示例： JSFiddle

 $(document).ready(function(){ $( "li" ).on( "mouseover", function() { $(this).animate({ trans: 55 }, { step: function(now,fx) { $(this).css('-webkit-transform','rotateY('+now+'deg)'); $(this).css('-moz-transform','rotateY('+now+'deg)'); $(this).css('transform','rotateY('+now+'deg)'); }, duration:10000 },'linear'); }); $( "li" ).on( "mouseleave", function() { $(this).animate({ trans: 60 }, { step: function(now,fx) { $(this).css('-webkit-transform','rotateY('+now+'deg)'); $(this).css('-moz-transform','rotateY('+now+'deg)'); $(this).css('transform','rotateY('+now+'deg)'); }, duration:3000 },'linear'); }); }); 

 body { font-family: sans-serif; } .parent { perspective: 50em; } .parent.perspective { perspective: 1000px; margin-top: 50px; } .child { display: block; width: 350px; margin: 10px; height: auto; background-color: deepskyblue; color:#fff; cursor: pointer; text-align: center; line-height: 80px; font-size: 26px; transform: rotateY(60deg); } .child:hover { /* transform: rotateY(10deg);*/ } 

 <div id="head"> <h1></h1> <span class="description">3D Effekt auf Elementen</span> </div> <div id="menu"> <ul class="parent perspective"> <li class="child">First Person</li> <li class="child">Battlefield 4</li> <li class="child">Call of Duty</li> <li class="child">Burnout Paradise</li> </ul> </div> 

還有兩個問題/問題：

首先：初始動畫不是從實際狀態到配置的動畫，正如您在jsfiddle中看到的那樣-為什么？ 以及要改變什么？

第二：如果我嘗試首先（從css）獲取已配置的DEG並將其放入js變量中，我沒有數字（例如：40或60或其他值）-它會獲取一些坐標...我需要解決方法在mouseout上將原始值重用於從CSS過渡到任何想法的情況下，如何獲得此結果？

親切的問候

Answer 1

第一：jquery懸停動畫從0deg到35deg運行。 您已將CSS中的元素轉換為60deg。

那么發生了什么，您看到元素旋轉了60deg（通過CSS）。 然后，您將鼠標懸停在jQuery上。它將元素從0deg動畫化為35deg，這就是為什么您首先看到它重置的原因。

鼠標離開時，jQuery將動畫設置為60deg，從而更新了trans屬性。 現在，當您第二次再次懸停時， trans為60，並設置為35動畫，動畫看起來還不錯。

我不是jQuery愛好者/專家，所以我不知道解決此問題的正確方法。 一種骯臟的方式是添加：

$(document).ready(function(){ // adding this line $( "li" ).animate({ trans: 60}, 0);

演示： https : //jsfiddle.net/xntkwgm9/13/

或者只是添加

transition: transform .3s ease-out;

在您的.child選擇器上，讓CSS處理： https : .child

第二：要獲得CSS中應用的轉換，可以看一下這篇文章Get element -moz-transform：rotate value in jQuery或https://css-tricks.com/get-value-of-css-rotation -through-javascript /