純CSS3製作正方體

2021-10-09 09:44:09 字數 2041 閱讀 6804

css3 允許您使用 3d 轉換來對元素進行格式化。

rotatex() x軸旋轉，圍繞其在乙個給定度數x軸旋轉的元素。

div
rotatey() y軸旋轉，圍繞其在乙個給定度數y軸旋轉的元素。

div
rotatez()z軸旋轉，圍繞其在乙個給定度數z軸旋轉的元素。

div
掌握好rotatex,rotatey,rotatez後，我們就能做出許許多多的3d效果

下面，我們就開始製作正方體

正方體，由6個面組成，所以線設定6個div

="big"


>


="t1"


>


<


/div>


="t2"


>


<


/div>


="t3"


>


<


/div>


="t4"


>


<


/div>


="t5"


>


<


/div>


="t6"


>


<


/div>


<


/div>再給最外層div設定3d效果


.big
給6個面設定共同樣式

.big>


.t1,


.t2,


.t3,


.t4,


.t5,


.t6
分別設定6個面的旋轉角度，讓其拼成乙個正方體

/*前*/


.t1 


/*後*/


.t2 


/*左*/


.t3 


/*右*/


.t4 


/*上*/


.t5 


/*下*/


.t6
這樣，正方體就製作完成了

還可以拓展，給其增加一些動畫等等效果

<


!doctype html>


"en"


>


"utf-8"


>


"viewport" content=


"width=device-width, initial-scale=1.0"


>


旋轉正方體<


/title>


<


/head>


*        


html,


body 


@keyframes xz 


to }.big 


.big>


.t1,


.t2,


.t3,


.t4,


.t5,


.t6 


/*前*/


.t1 


/*後*/


.t2 


/*左*/


.t3 


/*右*/


.t4 


/*上*/


.t5 


/*下*/


.t6 


<


/style>


="big"


>


="t1"


>


<


/div>


="t2"


>


<


/div>


="t3"


>


<


/div>


="t4"


>


<


/div>


="t5"


>


<


/div>


="t6"


>


<


/div>


<


/div>

CSS3 製作正方體

變形屬性 2d變形屬性 transform 他是css3中的變形屬性 通過transform 變形 來實現2d 或者3d 轉換,其中2d 有，縮放 scale x,y 移動 translate x,y 旋轉 rotate deg 傾斜 skew deg,deg 矩陣matrix 3d就是在2d基礎上...

CSS3 製作正方體

變形屬性 2d變形屬性 transform 他是css3中的變形屬性 通過transform 變形 來實現2d 或者3d 轉換,其中2d 有，縮放 scale x,y 移動 translate x,y 旋轉 rotate deg 傾斜 skew deg,deg 矩陣matrix 3d就是在2d基礎上...

純CSS實現3D正方體動畫效果

目錄前言 正文1.基本架構 2.書寫每個div樣式 3.為需要產生動畫的一面單獨設定樣式 4.設定滑鼠hover效果 5.優化 總結 純css實現3d正方體動畫效果，此方法是通過transform的旋轉 rotate 和位移 translate 實現的，具體效果是滑鼠滑過時正方體的乙個面會產生位移 ...