純html css製作3D立方體和動畫效果

2022-07-31 10:30:20 字數 1067 閱讀 2863

今天放上來的，是乙個用css3製作的立方體+動畫，效果如下。

整個效果都只用了html和css，沒有一句js，其實起初是使用了js來給六個面的小方格們賦值，後來強迫症犯了，直接手動寫上吧，這樣一句js都沒有，更乾脆利落點。

如下為body內整體結構，乙個類名為big的盒子內，放置六個ul，每個ul賦予不同的類名，標明了ul面所在的位置，這六個ul會作為立方體的六個面。

<


div 


class


="big"


>


<


ul class


="after"


>


ul>


<


ul class


="left"


>


ul>


<


ul class


="right"


>


ul>


<


ul class


="top"


>


ul>


<


ul class


="bottom"


>


ul>


<


ul class


="before"


>


ul>


div>
下面為大盒子big的css樣式，以及他要呼叫的css動畫的樣式。

.big @keyframes animate 50% 100% }
下面為六個ul和li的統一樣式，包括大小、定位、文字的一些樣式等。

.big ul .big li
下面為每個ul通過transfrom屬性，設定到不同的位置，以及內部li的背景顏色設定，這裡只寫出了left類的書寫方式，其他五個面類似。

.left .left li
整個效果寫出來，還是比較簡單的，只要明白各個命令的意思，剩下的就是組織一下邏輯而已，或許對於部分人來說，六個面的方位是個難點；另一部分人來說，動畫的書寫是難點；還有一部分人來說。。。編不出來了，感覺真沒有什麼難點，所以也無法推測其他人認為的難點是**

感覺，還是前面寫的那個彈跳小球比較麻煩點。

純CSS實現3D立方體效果

c keyframes zhuanto a.b d.e f.g style class c class a 正面div class b 右面div class d 左面div class e 背面div class f 頂面div class g 底面div div 注意 要實現3d效果首先必須設定...

3D 旋轉立方體

source cube src.js var cube function this.5 function d,e,a if e if a this.1 this.1 function p j,g,b,o this.7 function this.3 function this.4 function ...

3D立方體旋轉

1 首先要知道3d,x軸，y軸，z軸的方向 如圖所示 2 要想做乙個立方體首先是做6個面 以中間為基準 中間向前面平移150px transform translatez 150px 後面也平移150px,然後旋轉 rotatey 180deg 這樣前後面就做完了。左 以中間為準逆時針針旋轉90度 ...