原理：構建乙個立方體，四方體共有六個面，採用定位及其位移旋轉實現。
css樣式：
.rect-wrap
/*容器*/
.container
/*立方體的每個面*/
.slide
.slide img
實現方法，六個面重疊，以前面的乙個面為準，向前移動200px，向後沿著z軸移動200px構建前後面；左右各沿著y軸旋轉90度，前後沿著z移動200px構建左右面；上下各沿著x軸旋轉90度，上下沿z軸移動200px構建上下面。構造四方體成功。
/*前面*/
.front
/*後面*/
.back
/*左面*/
.left
/*右面*/
.right
/*上面*/
.top
/*下面*/
.bottom
如果使四方體旋轉可以在包含面的容器內加動畫效果使其自動轉動。
知識點
知識點說明
perspective
3d元素距離檢視的距離，以畫素計，其子元素會獲得透視效果而不是元素本身，只影響3d元素效果（近大遠小）
transform-style
指定元素在3d空間中的呈現，flat指所有子元素在2d平面上呈現，preserve-3d指所有子元素在3d空間上呈現
transform-origin
允許轉換被改變元素的位置，必須和transform屬性一同使用
transform
向元素應用2d或3d轉換，允許對元素進行縮放、移動、旋轉、傾斜
@keyframes
用於建立動畫，規定某項css的樣式，建立由當前樣式轉換為新樣式的動畫效果，必須規定動畫名稱和動畫時長
二：旋轉木馬
基本結構和立方體的構造一致
難點：如何確定旋轉的圓心，旋轉中心，（借鑑）各位大神的。將此圖看做為乙個平面，則各條虛線交匯點即為旋轉的中心。根據個數計算每張圖之間的旋轉角度，即為360deg/個數；計算z住距離旋轉中心距離，即為tan（度數/2）=規定圖邊長的一半/r。
給定計時器使其自動旋轉
letdegg=0;
function timer());
}setinterval(timer,2000);
transform3D實現翻頁效果
恢復內容開始 閒篇準備 好吧，閒話不說了，首先跟大家坦白一下，今天的內容會涉及到圖形學知識，但是我的圖形學知識都完全還給老師了，所以！你懂得 關於矩陣的知識我可能說的不清楚。大家可以到網上找一下相關的部落格，很多人寫的還是很好的。開始 首先為了能讓大家更好的了解整個專案，先 給大家先簡單介紹一下各個...
CSS3 Transform變形（3D轉換）
三維變換使用基於二維變換的相同屬性，如果您熟悉二維變換，你們發現3d變形的功能和2d變換的功能相當類似。css3中的3d變換主要包括以下幾種功能函式 3d位移 css3中的3d位移主要包括translatez 和translate3d 兩個功能函式 3d旋 css3中的3d旋轉主要包括rotatex...
時尚的3D鏤空文字效果例項教程
今天剛好在網上看到了時尚的3d文字效果，於是動手模仿設計了一下。下面給大家分享一下俺的勞動成果吧 從效果圖可見，這文字的3d效果不僅僅是從陰影和渲染上下了點功夫，連字型上也同樣使用了sullivan三種鏤空效果的字型 例項中附有 下面就簡述一下整個製作過程吧！1 首先新建乙個1200 500尺寸的文...