1. 如何css製作3d旋轉立方體效果
HTML結構
立方體結構中，使用一個wrapper div來包裹立方體。在裡面使用6個div來製作立方體的6個面。
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</派春div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>
立方體的每一個面都有它自己的元素。我們稍後會使用CSS來將立方體的6個面放置到正確的位置上。
CSS樣式
在立方體的CSS樣式中，首先要關注的是立方體的wrapper div。為了製作3D效果，我們需要為它提供一個 CSS perspective屬性。
.wrap {
perspective: 800px;
perspective-origin: 50% 100px;
}
CSS perspective屬性是一個比較復雜的CSS3屬性。最好的理解它的方法是看完文檔後，自己動手修改一下DEMO中的perspective屬性來看看它的變化。下面需要給包含立方體6個面的立方體的容器.cube提供樣式：
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
給立方體容器200像素的寬度，並設置為相對定位，這樣在它裡面的立方體的6個面可以設置為絕對定位。preserve-3d屬性確保所有6個面都處於3D立體狀態。在為6個面設置它們的位置之前，先給它們一些通用的樣式：
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
在進過上面對立方體6個面的一系列設置之後，現在我們可以為6個面製作變形效果，以使它們擾畢組裝為一個立方體。
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.front {
transform: translateZ(100px);
}
rotateY的值可以旋轉立方體的各個面，使上面的文字處於正確的位置上。而 translateZ 的值使元素在指定容器中向前或向後移動。translateY的值看起來有些混亂，但是請記住，它的作用是通過透明的面板來使指定的面升高或降低來製作3D效果。每一個面都有自己的translations值來使它們處於適當的位置上。你可以自己修改一下這些值來看看效果。
水平旋轉的立方體
該效果是DEMO1中的第一種效果。我們使用關鍵幀技術來使立方體在水平方向上旋轉：
@keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
.cube {
animation: spin 5s infinite linear;
}
是不是比想像中的要簡單得多？6個面上的文字在立方體旋轉時都處於正確的位置上。使塵李耐用關鍵幀可以製作出許多神奇的動畫效果。
垂直旋轉的立方體
該效果是DEMO1中的第二種效果。要在垂直方向上旋轉立方體只需要簡單的改變動畫的旋轉軸為Y軸。但是這種情況下面板上的文字有時候會顯示在相反的方向上，所以我們需要修改一下元素旋轉的代碼：
@keyframes spin-vertical {
from { transform: rotateX(0); }
to { transform: rotateX(-360deg); }
}
.cube-wrap.vertical .cube {
margin: 0 auto; /* keeps the cube centered */
transform-origin: 0 100px;
animation: spin-vertical 5s infinite linear;
}
.cube-wrap.vertical .top {
transform: rotateX(-270deg) translateY(-100px);
}
.cube-wrap.vertical .back {
transform: translateZ(-100px) rotateX(180deg);
}
.cube-wrap.vertical .bottom {
transform: rotateX(-90deg) translateY(100px);
}
扁平旋轉的立方體
該效果是DEMO1中的第三種效果。該效果中移除了立方體的3D效果，每次只顯示一個面。要做到只一點，我們可以從wrapper中移除perspective和原點的設置：
.wrap {
/* no more perspective */
perspective: none;
perspective-origin: 0 0;
}
現在立方體每次只會顯示一個面。
資源：http://sc.chinaz.com/jiaoben/150109306420.htm
2. rotate.js插件做旋轉，超過360°會直接反向回到0，怎麼解決
不一定非彎春讓要用 jquery.rotate.js 插件做呀，可以考慮使用css3的transform屬性，改變rotate()中的埋局角度參森陪數。
參考博客：
https://www.xuejiayuan.net/blog/
3. tweenmax.js有什麼功能
TweenMax.js是動畫插件庫GSAP（GreenSockAnimationPlatform）的核心文件，載入後即可使用四個主要運動類TweenLite、、TimelineLite、TimelineMax和一些其他插件。可對一個或多個物件進行動畫，或添加至時間軸中設計復雜的影片。
GSAP最初在flash時代（2004-2006）是作為flash軟體的插件用來增添動畫效果，當時的名字是「GreenSockTweeningPlatform」（GreenSock補間平台）。後來Flash逐漸沒落，在網頁上的應用，除了游戲和視頻播放之外不斷減少。出於自身發展考慮，GreenSock在v12（第十二版）中，加入了JavaScript的Class，也就是說我們可以在HTML網頁中使用TweenLite或TweenMax…等來製作動畫，也藉此版本把發展計劃的名稱更名為「GreenSockAnimationPlatform」（GreenSock動畫平台），主要是把「Tweening」換成「Animation」，因為前者主要為Flash在使用的名詞，而後者就屬於比較廣義的「動畫」，後來逐步發展為全平台均可應用的動畫庫。
最新的v2.x版本則全面支持html5和css3動畫，並適應於主流的瀏覽器。
在網頁上GreenSock目前提供使用的有「TweenLite」、「TweenMax」、「TimelineLite」、「TimelineMax」這四個項目，雖比Flash來的少，不過也是最常用的幾項，相信可以幫助設計師們在不使用Flash的情形之下，製作許多不同凡響的動畫效果，另外關於這四項的差別也跟Flash版本一樣
TweenMax.js的優勢在於性能強勁和使用簡便。
TweenMax中文網
4. 35three.js滑鼠控制物體旋轉縮放
three.js包含了很多相機控制器，通過旋轉相機可以達到同樣的旋轉效果。
但是當我們需要固定場景背景，固定固定攝像機的時候。我們只能去移動物體了。Three.js提供了
TransformControls.js控制項，它可以控制物體的旋轉、縮放、平移，但是使用沒宏起來並不方便。
這個時候就需要自己動手寫控制器了。
原理很簡單：獲取滑鼠（手勢）點擊的位置，以及滑鼠拖動的距離。
把移動的方向和距離作為參數傳遞給物體。枯耐冊然後在循環中改變物體的屬性來控畝賣制物體。
將要轉動的物體放在一個組中，改變該組就可以。
這里獲取的是X軸方向的滑鼠移動的值。然後繞Y軸旋轉。也可以添加其他的方向的旋轉事件。
也可以添加一個功能，點擊立方體之上才有效果。再說吧。