用css實現3D立方體旋轉特效

2022-10-10 12:15:13 字數 1067 閱讀 5960

先來看執行後出來的效果

它是在不停執行的乙個立方體

先來看html部分的**

<


div 


class


="rect-wrap"


>


<


div 


class


="container"


>


<


div 


class


="top slide"


>


div>


<


div 


class


="bottom slide"


>


div>


<


div 


class


="left slide"


>


div>


<


div 


class


="right slide"


>


div>


<


div 


class


="front slide"


>


div>


<


div 


class


="back slide"


>


div>


div>


div>
先建出來六個div然後再依次給它們設定樣式

再來看它們的樣式表

**只有這些便可以實現3d旋轉了


也可以變成的，可以這樣做


在每個div裡都加上，然後給每個設定成統一名字，再給他們統一樣式，設定高和寬就好了


可以貼上複製**，都來試試吧
				
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度 ...

				
HTML5特效 3D立方體旋轉
先欣賞一下該特效的最終效果 該特效是基於css3的一些新特性拼接而成.主要用到了hover,transform和 keyframe屬性.下面簡述一下這三個屬性的作用.詳情參考 hover 效果 當滑鼠移到元素上時會展現你定義的hover的樣式 使用方法 假定我們有乙個類,名為mystyle.修改它的...