模仿淘寶實現的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 要求越來越高，我們的解決方案也不斷更新，希望大家又更好的不同的方案，可以互相交流學習。