您好,登錄后才能下訂單哦!
小編給大家分享一下css如何實現(xiàn)3d立體魔方,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
先看效果圖吧!把這個看會了,一些網(wǎng)上的3d的相冊你就都會了
一、我們先準備好們的html代碼
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>3d立體魔方</title> <meta charset="UTF-8"> </head> <body> <div class="top"></div> <!--上 --> <div class="bottom"></div> <!--下 --> <div class="left"></div> <!--左 --> <div class="right"></div> <!--右 --> <div class="after"></div> <!--后 --> <div class="before"></div> <!--前 --> </body> </html>
好了我們html代碼就準備完成了,首先我們要有一個3d的思維,在大腦中現(xiàn)象一下魔方是什么樣子的,不就是用六個面組成的嗎。
二、添加css樣式
*{ margin:0; /* 默認樣式去掉邊距 */ padding:0; } div{ /* div通用樣式 設(shè)置高寬*/ width: 300px; height: 300px; opacity:0.5; /*透明度 半透明*/ } .top{ /* 通過類名設(shè)置顏色下面都是設(shè)置顏色*/ background-color:brown; } .bottom{ background-color:blueviolet; } .left{ background-color:blanchedalmond; } .right{ background-color:cadetblue; } .after{ background-color:chocolate; } .before{ background-color:cyan; }
好了到了這一步就相當(dāng)與把地基打好了,我們開始蓋樓了
你看到的必須是這個效果注意我這里是縮小了
,你應(yīng)該也是和我一樣方塊都是挨著的,像柱子一樣堆著的。這下我們就要開始像紙片一樣把他們拼湊起來了。
2、讓div重合
div{ width: 300px; height: 300px; position: absolute; /*在div的通用樣式中加上絕對定位*/ } body{ /*下面這一步是居中讓所有的div在屏幕上居中*/ height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; }
現(xiàn)在你們看到的是這個效果,明明6個方塊怎么只有一個,其實并不是,只是其他的div在這個div的后面,前面這個div擋住我們的視線了所以看不見。
三、開啟3d空間
body{ transform-style: preserve-3d; /*只需要這一條代碼開啟3d空間*/ height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; }
在把div拼湊起來
.top{ background-color:brown; transform:rotateX(90deg) translateZ(150px); /*先旋轉(zhuǎn)在偏移*/ } .bottom{ background-color:blueviolet; transform:rotateX(-90deg) translateZ(150px); } .left{ background-color:blanchedalmond; transform:rotateY(-90deg) translateZ(150px); } .right{ background-color:cadetblue; transform:rotateY(90deg) translateZ(150px); } .after{ background-color:chocolate; transform:rotateY(180deg) translateZ(150px); } .before{ background-color:cyan; transform:rotateY(0deg) translateZ(150px); }
你們看到的應(yīng)該還是這個樣子,其實我們已經(jīng)完成了魔方的拼接,只是魔方是平放著的我們看不出來,所以做一個動畫旋轉(zhuǎn)一下就ok了。你給div加上一點文字更容易觀察
四、動畫旋轉(zhuǎn)
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>3d立體魔方</title> <meta charset="UTF-8"> <style type="text/css"> *{ margin:0; /* 默認樣式去掉邊距 */ padding:0; } div{ width: 300px; height: 300px; position: absolute; opacity: 0.5; text-align: center; line-height: 300px; } body{ transform-style: preserve-3d; height: 100vh; animation: fram1 10s ease; /*引用動畫*/ width: 100vw; display: flex; justify-content: center; align-items: center; } .top{ background-color:brown; transform:rotateX(90deg) translateZ(150px); } .bottom{ background-color:blueviolet; transform:rotateX(-90deg) translateZ(150px); } .left{ background-color:blanchedalmond; transform:rotateY(-90deg) translateZ(150px); } .right{ background-color:cadetblue; transform:rotateY(90deg) translateZ(150px); } .after{ background-color:chocolate; transform:rotateY(180deg) translateZ(150px); } .before{ background-color:cyan; transform:rotateY(0deg) translateZ(150px); } @keyframes fram1{ /*動畫旋轉(zhuǎn)X軸與Y軸*/ 0%,100%{ transform: rotateY(0deg) rotateX(0deg); } 50%{ transform: rotateY(180deg) rotateX(180deg); } } </style> </head> <body> <!--加入文字讓視覺更加清晰--> <div class="top">1</div> <div class="bottom">2</div> <div class="left">3</div> <div class="right">4</div> <div class="after">5</div> <div class="before">6</div> </body> </html>
好了全部代碼都在這了,我已經(jīng)帶著你做完了,如果你想做一個3d相冊的話,直接給div加上背景圖就好background-color替換為background-image
五、總結(jié)
讓我們講講細節(jié)吧!當(dāng)讓這也是最終要的,希望你看到。拼接的過程你們只看到了代碼,首先我們制作了六個width:300px與height:300px
的div,我們通過position:absolute
讓他們疊加在了一起,你只需要記住絕對定位會讓層級重疊就好了z-inde:
可以控制他的層級,好了到最重要的地方了, transform:rotateX(90deg) translateZ(150px);
這里為什么我是先旋轉(zhuǎn)在偏移呢?
總之一句話就是,你右轉(zhuǎn)在向前進 和 你前進在右轉(zhuǎn)你到達的位置是不一樣的
就是這個原理。如果你明白了就算是入門了3d還有很多好玩的。等待你慢慢的摸索。
以上是“css如何實現(xiàn)3d立體魔方”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。