锤子官网banner图3D效果实现方法

如果大家不明白标题的意思，首先请去t.tt查看。 当时第一眼看到很是新奇，与传统的视差效果banner图不同，锤子官网的3D幻灯片是具有透视效果的3D空间，让人视觉上有纵深感，而且会随着鼠标的运动而倾斜转动，慢慢悠悠的挺有意思。 一直都说锤子科技是个设计驱动型的公司，对设计师非常友好，希望对于前端互联网技术锤子也能领领风骚，如今炫技确实不难，但是效果很棒，有时候就是这样，难的不是技术，而是创意。 回归到这个3D banner上来说，大概思考了一下实现思路，临摹了一个类似的效果，请看： See the Pen CSS 3D Ban'ne'r by qingjin (@mqhe2007) on CodePen.

其实实现方法很简单，具体方法大家可以看我的源码。

思路： 0.使用CSS3的transform-style: preserve-3d构建一个3D透视空间。 1.获取鼠标X，Y轴线性运动变量。 2.为了使鼠标左右移动图片产生左右偏转，得把鼠标运动到banner图中间点为“0,0”，这样的话往左为负，往右为正。 3.把变量赋值给CSS3的rotateX,rotateY。