模仿淘宝实现的3D app效果:
虽然很风靡的淘宝3d广告宣传动画过去有段时间了，但是依然值得我们学习。
正好半年前客户想要我们提供这样的效果，同时也需要我们添加用户的交互效果，长短镜头的拉伸处理，角度处理等等客户天马行空的需求。
我想首先我们要做到的就是很熟悉3D 陀螺仪的相关知识 点击学习掌握 3D 陀螺仪 。
那么在操作的过程中我本来想拉伸镜头是比较难处理的，但是真正相处解决方案之后，会发现并不难。以下以拉伸镜头移动处理代码来示例：
main
.
addAnimation(main
.box,
0,
1, {
x
:
0,
y
:
0,
z
:
225 }, {
x
:
0,
y
:
0,
z
:
250 },
19,
"
position
",
"
linear
");
main
.
addAnimation(main
.box,
0,
1, {
x
:
0,
y
:
0,
z
:
250 }, {
x
:
0,
y
:
0,
z
:
275 },
20,
"
position
",
"
linear
");
main
.
addAnimation(main
.box,
0,
1, {
x
:
0,
y
:
0,
z
:
275 }, {
x
:
0,
y
:
0,
z
:
300 },
21,
"
position
",
"
linear
");
setTimeout(
function() {
app
.router
.
goto(app
.dpParameters
.mpd_teaHouse);
app
.newClickMpd
=app
.dpParameters
.mpd_teaHouse;
},
2000);
效果图：
其中点击钱包可以出现拉伸镜头等交互效果。同时提供给大家二维码，供大家体验。（这是所有平台第一次发出来，不保证能够永久体验）。
那么客户需求总是不同的，之后我们又陆续碰到了，客户想要我们拍一个全景照片，还要在真是的3D全景中添加交互。那么我们用到了cordova来实现：
下图实际效果简单实例：
至于3d css中角度处理，角度范围控制，拉伸处理，首先需要的就是我们的那核心的近万行代码仔细阅读。
3D 要求越来越高，我们的解决方案也不断更新，希望大家又更好的不同的方案，可以互相交流学习。