浏览器本身是一个2维平面，对于3D的情况，实际上是增加了一个维度（深度），所以我们需要创建一个3D场景。这时浏览器不仅仅是一个平面了，更像是一个窗口，我们透过这个窗口去观察里面的三维世界。所谓的创建3D场景，就是告诉浏览器，我们是在这个窗口的哪个角度对这个3维世界进行观察，窗口里的3维物体距离这个窗口到底有多远。
设置好3D场景后，浏览器中的物体虽然已经变成是3维的了，但是如果我们不进行任何设置，他们看起来还是和二维的效果是一样的。所以我们需要使用一个新的属性 transform 来对这些元素进行调整，以展现出他们的3维效果。事实上对于 transform 这个属性同样也适用于2D的场景，所以为了让浏览器知道我们现在所使用的 transform 调整元素是在一个3维空间下，我们需要加上这样一个属性：transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
一个例子：
html：
<nav>
<a href="#" rel="external nofollow" ><span data-hover="Hello">Hello</span></a>
</nav>
css：
/*基本样式*/
*{padding:;margin:;font-family:'微软雅黑';box-sizing:border-box;}
nav{width:100%;height:200px;background:#0e83cd;padding:50px 100px;}
a{width:160px;height:45px;display:inline-block;line-height:45px;text-align:center;text-decoration:none;margin:10px 20px;font-size:24px;}
span{width:100%;display:inline-block;color:#fff;background:#2195de;padding:0 10px;position:relative;}/*3d效果样式*/
a{
-webkit-perspective:1000px;
}
a span{
-webkit-transform-origin:0 0;
-webkit-transform-style:preserve-3d;
-webkit-transition:-webkit-transform 0.3s;
}
a span::before{
content:attr(data-hover);
position:absolute;left:;top:100%;
width:100%;height:100%;background:#0965a0;
-webkit-transform-origin:0 0;
-webkit-transform-style:preserve-3d;
-webkit-transform:rotateX(-90deg);
-webkit-transition:background 0.3s;
}
a:hover span{
-webkit-transform:rotateX(90deg) translateY(-22px);
}
a:hover span::before{
background:#2195de;
}
css样式分析：（这里是只针对Chrome浏览器做的demo）
一、在需要3d效果的元素的父级创建3D场景，也就是添加下面两条属性。
-webkit-perspective:1000px;
-webkit-perspective-origin:(50% 50%); –默认值，没有做设置。
二、具体到每个3d效果的元素，需首先设置下面两条属性，
-webkit-transform-style:preserve-3d; –3d效果必须加上这一条，也是固定不变的一条。
-webkit-transform-origin:(0 0); –根据需求设置前两个参数
然后具体添加transform的变换属性。
三、一个疑惑，暂未找到原因
a:hover span{
-webkit-transform:rotateX(90deg);
-webkit-transform:rotateX(90deg) translateY(-22px);
-webkit-transform:translateY(-22px) rotateX(90deg);
}
在 -webkit-transform 中 rotateX(90deg) 和 translateY(-22px) 的调用顺序不同，得到的的效果会有差别。
注意点：
1、CSS3 perspective-origin 属性的默认值为(50% 50%)，一般情况不需要设置，保持默认即可以。
2、CSS3 transform-origin 属性的默认值为(50% 50% 0)，一般情况需要根据需求设置前两个参数。
transform-origin属性允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。
3、注意 perspective-origin 与 transform-origin 的区分，别弄混了。
