css3d.js的簡單介紹

本文目錄一覽：

• 1、js函數THREE.CSS3DObject = function ( e ) {……} 中THREE.CSS3DObject 中的點號（.)是怎麼回事？
• 2、three.js css3d 如何更新數據
• 3、如何css製作3d旋轉立方體效果

js函數THREE.CSS3DObject = function ( e ) {……} 中THREE.CSS3DObject 中的點號（.)是怎麼回事？

THREE其實我個人認為是一個JS的封裝好的類，而

CSS3DObject是一個方法屬性，我是這麼認為的，希望嫩給你幫助

—–君少

three.js css3d 如何更新數據

當有內容需要更新時，需要重新上傳整個全局紋理，webgl中有一種局部紋理更新技術,每次有更新時，只需要更新它的一個局部區域即可。

但是這裡要解決的問題是THREE.js並沒有提供局部紋理更新的方式，也沒有相應的自定義介面，那麼這時候就需要我們自己來處理了。這裡自定義一個Texture的子類,開闢一塊內存區域,在需要的時候動態更新局部紋理，其中src這裡是ImageData對象,具體代碼可以參考這裡：

如何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;

}

現在立方體每次只會顯示一個面。

資源：