javascript - 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

第一:jquery 悬停动画从 0deg 运行到 35deg。您将 CSS 中的元素转换为 60deg。

那么发生了什么，您看到元素旋转了 60 度(通过 CSS)。然后你将鼠标悬停，jQuery 启动。它将元素从 0deg 动画化到 35deg，这就是你看到它首先重置的原因。

在鼠标离开时，jQuery 以 60 度的动画显示，更新 trans 属性。 现在，当您第二次再次悬停时，trans 为 60 并设置为 35，动画看起来不错。

我不是 jQuery 粉丝/专家，所以我不知道修复它的正确解决方案。一种肮脏的方式是添加:

$(文档).ready(函数(){ //添加这一行 $( "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/