3d立体几何魔方的教程
1、先将平面上的6个DIV拼接在一起。形成一张类似于3d立方体图形展开的平面图。
2、我们需要将每一个面旋转到相应的位置上，每一个面的旋转轴都是不一样的。上下，左右，分别对应的旋转轴,以及旋转角度分别是：bottom(90deg),top(-90deg),right(90deg),left(-90deg)。同时要注意在旋转后面的时候，旋转轴为Z轴，并不是上下，左右边。浏览器上面的坐标系是这样的：Z轴是屏幕里外两个方向（向外为正，向里为负），X轴的水平方向（向右为正，向左为负）；
3、接下来还有一个关键的步骤，就是当变换导致元素在 3D 空间中旋转时，指定当元素背面朝向观察者时不可见；
4、接下来我们要做的就是设置一下所处环境，我们要设置成3D的环境，具体的语法形式如下：transform-style: preserve-3d;
5、然后我们为了让立方体旋转起来，以便更好的实现3D效果。首先找到旋转中心，在3D魔方中，旋转中心就是立方体的几何中心。
绛旓細1銆乨绔嬩綋鍑犱綍纾佹ч瓟鏂瑰鍘熸暀绋嬶細澶嶅師搴曢潰鍗佸瓧锛屾妸榄旀柟缈昏浆锛屽皢搴曞眰浣滀负椤跺眰锛屾壘鍒伴渶瑕佺殑妫卞潡锛岃浆鍒伴渶瑕佺殑浣嶇疆锛屽湪鎷煎崄瀛楃殑杩囩▼涓簳灞傜殑杞姩鏄病鏈夊奖鍝嶇殑銆2銆d绔嬩綋鍑犱綍榄旀柟鐨勬暀绋锛堢涓姝ワ級鍦ㄧ涓闈㈠仛涓涓崄瀛楋紙绗簩姝ワ級瀵瑰ソ绗竴闈紝浣嗘槸鐣欎笅涓涓銆傦紙绗笁姝ワ級鏀剧浜屽眰鐨勬１鑹插潡锛屼絾鏄繕鏄暀涓嬩竴...
绛旓細3d绔嬩綋鍑犱綍榄旀柟鐨勬暀绋 锛堢涓姝ワ級鍦ㄧ涓闈㈠仛涓涓崄瀛楋紙绗簩姝ワ級瀵瑰ソ绗竴闈紝浣嗘槸鐣欎笅涓涓銆傦紙绗笁姝ワ級鏀剧浜屽眰鐨勬１鑹插潡锛屼絾鏄繕鏄暀涓嬩竴涓(绗洓姝) 瀵瑰ソ鍓╀笅鐨5涓１鑹插潡銆(绗簲姝)鎽嗗ソ浜斾釜瑙掑潡鐨勪綅缃紝浣嗕笉绠℃湞鍚戙(绗叚姝)璋冩暣浜斾釜瑙掑潡鏈濆悜锛屾渶缁堝畬鎴愰瓟鏂广傞瓟鏂癸紝鍙堝彨椴佹瘮鍏嬫柟鍧楋紝...
绛旓細1銆佸厛灏嗗钩闈笂鐨6涓狣IV鎷兼帴鍦ㄤ竴璧枫傚舰鎴愪竴寮犵被浼间簬3d绔嬫柟浣撳浘褰㈠睍寮鐨勫钩闈㈠浘銆2銆佹垜浠渶瑕佸皢姣忎竴涓潰鏃嬭浆鍒扮浉搴旂殑浣嶇疆涓婏紝姣忎竴涓潰鐨勬棆杞酱閮芥槸涓嶄竴鏍风殑銆備笂涓嬶紝宸﹀彸锛屽垎鍒搴旂殑鏃嬭浆杞,浠ュ強鏃嬭浆瑙掑害鍒嗗埆鏄細bottom(90deg),top(-90deg),right(90deg),left(-90deg)銆傚悓鏃惰娉ㄦ剰鍦ㄦ棆杞悗闈㈢殑鏃跺...
绛旓細3d绔嬩綋鍑犱綍榄旀柟鐨勬暀绋濡備笅锛氶鍏堬紝鎴戜滑闇瑕佷簡瑙3d绔嬩綋鍑犱綍榄旀柟鐨勫熀鏈瀯閫犲拰缁勬垚閮ㄥ垎銆傝繖涓瓟鏂圭敱涓績鍧椼佽鍧楀拰杈瑰潡缁勬垚锛屾瘡涓儴鍒嗛兘鏈変笉鍚岀殑棰滆壊鍜屽舰鐘躲傛帴涓嬫潵锛屾垜浠渶瑕佸涔犱竴浜涘熀鏈殑榄旀柟杞姩鎶宸с傝繖浜涙妧宸у寘鎷『鏃堕拡杞姩銆侀嗘椂閽堣浆鍔ㄣ佸悜涓婅浆鍔ㄥ拰鍚戜笅杞姩绛夈傞氳繃杩欎簺杞姩鏂瑰紡锛屾垜浠彲浠ユ敼鍙橀瓟鏂圭殑褰㈡佸拰...
绛旓細3d绔嬩綋鍑犱綍纾佹榄旀柟澶嶅師鏁欑▼锛1銆佸鍘熷簳闈㈠崄瀛楋紝鎶婇瓟鏂圭炕杞紝灏嗗簳灞備綔涓洪《灞傦紝鎵惧埌闇瑕佺殑妫卞潡锛岃浆鍒伴渶瑕佺殑浣嶇疆锛屽湪鎷煎崄瀛楃殑杩囩▼涓簳灞傜殑杞姩鏄病鏈夊奖鍝嶇殑銆2銆佸鍘熷簳闈㈣鍧楋紝杩樺師瑙掑潡鏃跺厛鍦ㄥ簳閮ㄦ壘闇瑕佺殑瑙掑潡锛岃嫢娌℃湁鍐嶅幓椤跺眰鎵俱3銆佸鍘熶腑灞傛１鍧楋紝鎶婃暣涓瓟鏂圭炕杞繃鏉ワ紝瀹屾垚鐨勯潰鏈濅笅銆4銆佸鍘熼《灞傚崄瀛...
绛旓細绔嬩綋鍑犱綍榄旀柟鍙樻鏂瑰舰鍐呭濡備笅锛1.棣栧厛锛岄夋嫨涓涓潰鏉ユ瀯寤轰竴涓崄瀛楋紝鐒跺悗灏嗗洓杈逛腑蹇冨潡鐨勯鑹蹭笌鍗佸瓧鐨勭浉閭婚鑹插榻愩2.鎸夌収宸︿笂鍙充笅鐨勬柟寮忓皢搴曞眰鏀惧洖鍘熶綅銆傚鏋滃湴鏂规病閿欙紝渚ч潰灞傚凡缁忔嫾濂戒簡銆3.鐒跺悗灏嗕腑蹇冨潡涓庣粍瑁呭ソ鐨勫眰瀵归綈锛屾寜鐓у叕寮忕粍瑁呰竟鐨勪腑闂村眰銆4.鍦ㄩ《灞傛嫾鍗佸瓧锛屼絾鏄敞鎰忎笉瑕佹墦涔卞墠闈㈠凡缁忔嫾濂界殑...
绛旓細绗竴姝ワ細鎴戜滑鍏堢‘瀹氫竴涓嬭繖涓绔嬩綋鍑犱綍浣撳悇涓潰鐨勫彨娉曪細鎶榄旀柟鏀惧湪妗岄潰涓婏紝闈㈠悜浣犵殑 鍙仛鍓嶉潰锛涜创鐫妗屽瓙鐨勫彨搴曢潰锛涘悜澶╃殑鍙《闈紱鍦ㄩ《闈㈡垨搴曢潰涓婁綔涓涓悓棰滆壊鐨勫崄瀛楋紝 鍙仛椤堕潰鎴栧簳闈㈠崄瀛椼傚湪杩愪綔杩囩▼涓紝搴曢潰姘歌繙鏄簳闈紝涓嶈兘鏇存敼銆傛瘡涓涓潰閮芥湁涓涓 涓績绮掞紙鍥涘懆涓嶉潬杈癸級锛屽洓涓腑绮掞紙鍙湁...
绛旓細鎶榄旀柟杩樺師鐨勫彛璇鏁欑▼濡備笅锛氬噯澶囨潗鏂欙細涓涓瓟鏂广1銆佸皢涓棿鏄櫧鑹插潡鐨勪竴闈紙鏈変釜 logo鐨勯偅鍧楋級瀵圭潃涓婇潰锛屽湪椤堕儴鍋氬嚭鐧藉崄瀛楋紝鍏朵粬棰滆壊鐨勫潡閮藉埌鐩稿簲鐨勪綅缃2銆佸皢鐧借壊鐨勮鍧楀綊浣嶃3銆佹妸鐧借壊闈㈣浆鍚戜笅锛屾壘鍑虹孩缁胯竟鍧楋紝鑻ョ孩缁胯竟鍧楀湪椤跺眰鍒欐寜椤烘椂閽堟柟鍚戣浆鍔ㄩ《灞傜洿鍒拌竟鍧椾笌鍥句笂鐨1涓儏鍐电浉鍚岋紝鍦ㄦ寜鐓у彛璇...
绛旓細榄旀柟鎷嗚В娉 绗竴姝:鎴戜滑鍏堢‘瀹氫竴涓嬭繖涓绔嬩綋鍑犱綍浣撳悇涓潰鐨勫彨娉:鎶婇瓟鏂规斁鍦ㄦ闈笂,闈㈠悜浣犵殑鍙仛鍓嶉潰;璐寸潃妗屽瓙鐨勫彨搴曢潰;鍚戝ぉ鐨勫彨椤堕潰;鍦ㄩ《闈㈡垨搴曢潰涓婁綔涓涓悓棰滆壊鐨勫崄瀛,鍙仛椤堕潰鎴栧簳闈㈠崄瀛椼傚湪杩愪綔杩囩▼涓,搴曢潰姘歌繙鏄簳闈,涓嶈兘鏇存敼銆傛瘡涓涓潰閮芥湁涓涓腑蹇冪矑(鍥涘懆涓嶉潬杈),鍥涗釜涓矑(鍙湁涓や釜娌),鍥涗釜瑙掔矑...
绛旓細涓夐樁榄旀柟杩樺師鍙ｈ瘈鏈夛細鈶犵櫧鑹插崄瀛楋紝寰堢畝鍗曘傗憽鐧借壊瑙掑潡褰掍綅锛1銆佸墠鍙冲綊浣嶏紝涓娾啇鍙斥啈涓娾啋鍙斥啌涓娾啋鍓嶉嗕笂鈫愬墠椤恒2銆佸墠宸﹀綊浣嶏紝涓娾啋宸︹啈涓娾啇宸︹啌涓娾啇鍓嶉『涓娾啋鍓嶉嗐傗憿椤堕儴鍗佸瓧褰掍綅锛屽彸涓嬩笂宸﹀墠閫嗕笂宸﹀墠椤哄彸涓婏紝1-4娆°傗懀椤跺眰褰掍綅搴曞乏鍙冲乏搴曞彸鍙充笂锛2鎴栬4娆°備笂鍙冲簳宸﹀彸宸﹀簳鍙冲彸涓婏紝2鎴栬...
