预览 先看看最终效果
简介 由来
最初看到这个是在14年5月，猛戳这里：妙味官网，觉得非常炫。想要做出来，所以就开始学习web。
那时候是做c/s的，也因为这个走上了b/s之路，(ﾟДﾟ≡ﾟДﾟ) 现在前后台都要写了。
前几天又来试试，发现自己能大概实现了( ﾟ∀ﾟ)，好屌。
因为平时主要是实现功能，所以可能一些代码习惯，实现方式不太好，希望指出来。
前提 需要了解的东西
1. css3基础
我也是一个菜鸟，会的不多(￣∇￣)，就不在这里show无知了，主要涉及到：transform,transform-style(IE不支持？)
可以参见：Transform-style和Perspective属性
2. 了解缓动
大家玩一玩这个菜单，会看到它不是匀速展开的，而是在展开动作的末尾“抖”一下
这个涉及到算法...我个人仅作了解(就是只知道这个东西，怎么实现不知道)
各种缓动效果和更详细的说明：JavaScript Tween算法及缓动效果
3. 利用jquery来实现缓动
jquery有animate方法，可以非常方便的实现动画，原理是实时改变节点的样式。
附：使用jquery的animate实现的动画，节点最好不要设置css3的transition，有冲突
我看到jquery的动画也不是匀速改变，于是查了一下资料，确实也有这个缓动算法，默认只有两种：linear匀速,swing慢-快-慢，添加扩展方法来实现(如2中链接缓动实例的 easeOutBack)：慢-中-快-太快导致超过了-返回到正确的位置，专业术语为：超过范围的三次方缓动：
jQuery.extend(jQuery.easing, {
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
}
})
jQuery的animate动画，我以前不知道在哪里看到的：只能实现可以用数字表示的动画。也就是说css3的transform是不行的。但是animate有一种重载！
常用的方式：
$("html,body").animate({ scrollTop: "0px" }, 1000);
另一种重载：
$({ num: 32 }).animate({ num: 64 }, {
duration:1000,
step: function () {
console.log("当前的num是：" + this.num);
},
complete: function () {
console.log("结束了，num是：" + this.num);
}
});
哈哈，看到这个大家就有思路了吧：
根据要改变的样式定义一个对象，利用animate改变这个对象，监听step和complete事件来拼接新的样式赋值给你要执行动画的元素！
具体实现 最终代码
在妙味官网上面看了很久都不知道从何看起，把这个做出来之后看到博友 吕大豹 将妙味的代码扒出来了，艹，还是没看懂。
以下是3D下拉菜单的代码：
下面是厚颜无耻的求赞时间
您有没有对这篇文章感兴趣呢？
.