jQuery animation of 3d transition

Question

i am actualy trying to create a 3D Menu for that i use CSS3 transform and jquery animate for the animation when hovering.

Here is my first working example: 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> 

there are two problems / questions left:

First: the initial animation animates not from actual state to the configured as you can see in my jsfiddle - why? and what to change?

second: if i try to obtain first the configured DEG (from the css) and put it into a js variable i don't have the number (eg: 40 or 60 or whatever) - it obtains some coordinates... i need to have the solution to on mouseout reuse the origin value for the transition from the css any ideea how to get this?

Kind regards

Answer 1

1st: jquery hover animation runs from 0deg to 35deg. You transformed the element in CSS to 60deg.

So what happens, you see the element 60deg rotated (by CSS). Then you hover and jQuery kicks in. It animates the element from 0deg to 35deg and that's why you see it resetting first.

On mouse leave, jQuery animates to 60deg, updating the trans property. Now when you hover again for the second time, trans is 60 and animates to 35, and the animation looks fine.

Im not a jQuery fan / expert so I don't know the proper solution to fix it. One dirty way is adding:

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

Demo: https://jsfiddle.net/xntkwgm9/13/

Or just add

transition: transform .3s ease-out;

on your .child selector and let CSS handle it: https://jsfiddle.net/xntkwgm9/10/

2nd: To obtain the transform as applied in CSS you could take a look at this post Get element -moz-transform:rotate value in jQuery , or https://css-tricks.com/get-value-of-css-rotation-through-javascript/