Javascript 三维过渡的jQuery动画

我实际上是在尝试创建一个3D菜单，我在悬停时使用CSS3 transform和jquery animate来制作动画

以下是我的第一个工作示例：

$（文档）.ready（函数（）{
$（“li”）。在（“鼠标悬停”，函数（）上{
$（this.animate（{trans:55}）{
步骤：函数（现在，fx）{
$（this.css（'-webkit transform'，rotateY（'+now+'deg）'）；
$（this）.css（'-moz transform'，rotateY（'+now+'deg'）；
$（this.css（'transform'，'rotateY（'+now+'deg'）；
},
持续时间：10000
}“线性”）；
});
$（“li”）。在（“mouseleave”，函数（）上{
$（this.animate（{trans:60}）{
步骤：函数（现在，fx）{
$（this.css（'-webkit transform'，rotateY（'+now+'deg）'）；
$（this）.css（'-moz transform'，rotateY（'+now+'deg'）；
$（this.css（'transform'，'rotateY（'+now+'deg'）；
},
持续时间：3000
}“线性”）；
});
});
正文{
字体系列：无衬线；
}
.家长{
透视图：50em；
}
.家长视角{
透视图：1000px；
边缘顶部：50px；
}
.孩子{
显示：块；
宽度：350px；
利润率：10px；
高度：自动；
背景颜色：深蓝；
颜色：#fff；
光标：指针；
文本对齐：居中；
线高：80px；
字号：26px；
变换：旋转（60度）；
}
.孩子：悬停{
/*变换：旋转（10度）*/
}

三维效果auf元素

第一人称
战场4
职责召唤
倦怠天堂

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

那么发生了什么，您看到元素旋转了60度（通过CSS）。然后悬停，jQuery开始工作。它会将元素从0度设置为35度，这就是为什么您会首先看到它重置的原因

鼠标离开时，jQuery将动画设置为60度，更新
trans
属性。
现在，当您再次悬停时，
trans
为60，动画设置为35，动画看起来很好

我不是jQuery的粉丝/专家，所以我不知道如何解决这个问题。一种肮脏的方式是添加：

$（文档）.ready（函数（）{
//添加此行
$（“li”）.animate（{trans:60}，0）；

演示：

或者只是加上

transition:transform.3s放松；

在
.child
选择器上，让CSS处理它：

第二：要获得CSS中应用的转换，你可以看看这篇文章，或者第一：jquery悬停动画从0度运行到35度。你将CSS中的元素转换为60度

发生了什么，你看到元素旋转了60度（通过CSS）。然后你悬停，jQuery启动。它将元素从0度设置为35度，这就是为什么你看到它首先重置

鼠标离开时，jQuery将动画设置为60度，更新
trans
属性。
现在，当您再次悬停时，
trans
为60，动画设置为35，动画看起来很好

我不是jQuery的粉丝/专家，所以我不知道如何解决这个问题。一个肮脏的方法是添加：

$（文档）.ready（函数（）{
//添加此行
$（“li”）.animate（{trans:60}，0）；

演示：

或者只是加上

transition:transform.3s放松；

在
.child
选择器上，让CSS处理它：

第二：要获得CSS中应用的转换，你可以看看这篇文章，或者
WOW-我非常关注jquery，没有搜索CSS解决方案-非常感谢！不客气。但是你已经在
：hover
，上有了正确的属性，只是忘记了
转换（
；）哇-我太专注于jquery了，以至于我没有搜索CSS解决方案-非常感谢！不客气。但是你已经在
上有了正确的属性：hover
，只是忘记了
转换（转换）
；）你是这个意思吗？-->你是这个意思吗？-->