3D 旋轉立方體

2021-06-01 09:06:24 字數 1105 閱讀 2129

//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() 


} cube = function() 


var c = o[d];


var f = c.$6(g);


for (var m = 0; m < 6; m++) f[m] = ((f[m] * 1e6) >> 0) / 1e6;


if (r) else 


a[q] = "matrix(" + f.join(",") + ")"


}} function t() ;


a.sort(function(d, e) );


for (c = 0; c < 6; c++) x(a[c].id, c < 3)


} function v(d) 


this.setlocate = function(d, e) ;


this.setface = function(d, e) else 


a[q + "origin"] = "0% 0%"


}v(a);


t()};


this.setradius = function(d) ;


this.rotate = function(d, e, a) 


}; cube.face_front = 0;


cube.face_right = 1;


cube.face_back = 2;


cube.face_left = 3;


cube.face_top = 4;


cube.face_bottom = 5


})()



乙個有趣的查詢效果

3D立方體旋轉

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

3d實現立方體

3d 俗稱3d變換，指基於3d立體的角度來設定盒子。例如，將盒子設定為立方體。3d的效果跟2d是一樣的，有平移和旋轉，不同點在於，2d只有x軸和y軸，3d會多乙個z軸，用於表示立體。3d的效果通過需要遠距離觀察才能看出立體效果，因為距離太近，我們只能看出平面的2d效果，這就需要在設定3d變換效果之前...

CSS做3D旋轉魔方（立方體）

css做3d旋轉魔方，使用的是3d位移與旋轉屬性，以及動畫屬性。不多，以下便是全部 立方體title keyframes run 40 70 100 box box div 分別給每個面新增乙個背景圖，並將前後上下左右六個面通過位移與旋轉，放置到對應的位置。f.b.t d.l rstyle head...