溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css如何實現(xiàn)3d立體魔方

發(fā)布時間:2021-03-18 13:55:57 來源:億速云 閱讀:220 作者:小新 欄目:web開發(fā)

小編給大家分享一下css如何實現(xiàn)3d立體魔方,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

先看效果圖吧!把這個看會了,一些網(wǎng)上的3d的相冊你就都會了

css如何實現(xiàn)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)與把地基打好了,我們開始蓋樓了

css如何實現(xiàn)3d立體魔方
 

你看到的必須是這個效果注意我這里是縮小了,你應(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;
}

css如何實現(xiàn)3d立體魔方
 

現(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);
}

css如何實現(xiàn)3d立體魔方
 

你們看到的應(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
 

css如何實現(xiàn)3d立體魔方

五、總結(jié)

讓我們講講細節(jié)吧!當(dāng)讓這也是最終要的,希望你看到。拼接的過程你們只看到了代碼,首先我們制作了六個width:300px與height:300px的div,我們通過position:absolute讓他們疊加在了一起,你只需要記住絕對定位會讓層級重疊就好了z-inde:可以控制他的層級,好了到最重要的地方了, transform:rotateX(90deg) translateZ(150px);這里為什么我是先旋轉(zhuǎn)在偏移呢?

css如何實現(xiàn)3d立體魔方 

總之一句話就是,你右轉(zhuǎn)在向前進 和 你前進在右轉(zhuǎn)你到達的位置是不一樣的
就是這個原理。如果你明白了就算是入門了3d還有很多好玩的。等待你慢慢的摸索。

以上是“css如何實現(xiàn)3d立體魔方”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!

向AI問一下細節(jié)

免責(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)容。

css
AI