jQuery animated 3D Transition

an animated 3D Transition

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="head">
            <h1></h1>
            <span class="description">3D Effekt auf Elementen</span>
            <p>
            The First Time you Hover an element it "jumps" to an undefined DEG - why?<br />
            The Effect after the First Hover (second and third Hover) are the effect that i want..
            </p>
        </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>

CSS

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);*/
            }

JavaScript

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

  $( "li" ).on( "mouseover", function mouseIn() {              
    $(this).animate({  trans: 15 }, {
      step: function(now,fx) {

        $(this).css('transform','rotateY('+now+'deg)');
      },
      duration:'slow'
    },'linear');
  });
  $( "li" ).on( "mouseleave", function mouseOut() {
    $(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:'slow'
    },'linear');
  });

});