jQuery 3d 过渡动画

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 或其他）- 它获得一些坐标...我需要解决 on mouseout 重用原点值从 css 任何想法如何得到这个？

亲切的问候

Answer 1

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

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

鼠标离开时，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/

2nd：要获得在 CSS 中应用的变换，您可以查看此 post Get element -moz-transform:rotate value in jQuery, or https://css-tricks.com/get-value-of-css-rotation-through-javascript/

jQuery 3d 过渡动画

jQuery animation of 3d transition

javascript

css

jquery

transform

jquery-animate