CSS做3D旋轉魔方(立方體)

2021-09-25 23:17:27 字數 984 閱讀 9236

css做3d旋轉魔方,使用的是3d位移與旋轉屬性,以及動畫屬性。**不多,以下便是全部**:

立方體title

>

>

@keyframes run

40%70%

100%}*

.box

.box div

//分別給每個面新增乙個背景圖,並將前後上下左右六個面通過位移與旋轉,放置到對應的位置。

.f.b.t

.d.l

.rstyle

>

head

>

>

class

="box"

>

class

="f"

>

div>

class

="b"

>

div>

class

="t"

>

div>

class

="d"

>

div>

class

="l"

>

div>

class

="r"

>

div>

div>

body

>

html

>

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度 ...

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

先來看執行後出來的效果 它是在不停執行的乙個立方體 先來看html部分的 div class rect wrap div class container div class top slide div div class bottom slide div div class left slide d...