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 中看到的那样 - 为什么？以及要改变什么？

第二：如果我尝试首先获取配置的 DEG（来自 css）并将其放入 js 变量中，我没有数字（例如：40 或 60 或其他） - 它会获得一些坐标...我需要有解决方案来在 mouseout 上重用从 css 转换的原始值任何想法如何得到这个？

亲切的问候

Answer 1

1st：jquery 悬停动画从 0deg 运行到 35deg。您将 CSS 中的元素转换为 60 度。

那么会发生什么，您会看到元素旋转了 60 度（通过 CSS）。然后你悬停，jQuery 启动。它使元素的动画从 0 度到 35 度，这就是你看到它首先重置的原因。

鼠标离开时，jQuery 动画到 60 度，更新 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://jsfiddle.net/xntkwgm9/10/

第二个：要获得在 CSS 中应用的转换，您可以查看这篇帖子 Get element -moz-transform:rotate value in jQuery 或 https://css-tricks.com/get-value-of-css-rotation-through-javascript/