css3製作立方體

2021-10-03 14:57:03 字數 1299 閱讀 5507

建立6個寬高為100px的正方形,調整ul在頁面的位置,分別設定不同li裡的背景色。為了方便區分,在li裡設定數字顯示

使用絕對定位的目的是為了讓6個li分別顯示在圍成正方體所需的位置上。

屬性:transform-style 設定3d空間

屬性值:flat 處在2d空間

preserve-3d 處在3d空間

將ul設定為3d空間。

ul

屬性:transform:translate() 位移

transform:translatex() 沿x軸位移

transform:translatey() 沿y軸位移

transform:translatez()沿z軸 位移

transform:rotate()旋轉

transform:rotatex()沿x軸旋轉

transform:rotatey()沿y軸旋轉

transform:rotatez()沿z軸旋轉

2、3、4、5、6這些li方塊要向z軸的負方向位移50px,

第乙個li向z軸正方向位移50px,

2沿x軸旋轉90度

3沿x軸旋轉-90度

4沿y軸旋轉90度

5沿y軸旋轉-90度

完成正方體的製作

CSS3製作立方體

要用css3來製作乙個正方體,我們先來看正方體的結構,如圖 1.建立結構 正方體有六個面,我們可以先建立六個面,放在li裡。設定寬高,和背景色 方便區分 效果如圖 2.位移 接下來可以通過定位 position 和位移 translate 將他們移動到圖一的位置。先用絕對定位將六塊正方形定位到第1塊...

如何用css3製作立方體

用css3製作立方體步驟 具體實現 千峰逆戰2004學員完成演示效果 因為是製作立方體,所以我們要給自定義大小的盒子新增3d屬性 transform style preserve 3d 這樣我們當 執行的時候才會在我們眼前顯示3d的效果,完後是新增景深,也就是目標位置距離我們眼睛間的距離,模仿實際看...

關於如何使用CSS3製作立方體的問題

先說一下網頁當中的數軸,以螢幕的左上方為原點 重點說一下z軸,z軸是垂直於螢幕的,比如我們給乙個元素加transform屬性,transform translatez 100px 從正面看是沒有任何變化的。所以我們不能從正面去看,一般我們想看到立方體效果,都要給box加乙個三維空間上的旋 trans...