怎么使用CSS 3D變換創(chuàng)建等距布局

這篇文章將為大家詳細(xì)講解有關(guān)怎么使用CSS 3D變換創(chuàng)建等距布局，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

　　css創(chuàng)建一個(gè)3d空間

　　我們從Envato的最新倡議中汲取了本教程的靈感； Envato元素 。 Elements的主頁提供了一系列創(chuàng)意產(chǎn)品（ 字體 ， 圖標(biāo) ， 圖形模板等），它們以整潔的等距網(wǎng)格布局一起顯示。

　　我們將使用CSS 3D變換來重新創(chuàng)建此等軸測(cè)圖。

　　“等軸測(cè)投影”是一種以明顯的三個(gè)維度呈現(xiàn)設(shè)計(jì)的方法（通常在80年代和90年代的工程和游戲中使用，3D處理能力非常有限）。

　　這不是我們?cè)诂F(xiàn)實(shí)生活中遇到的三個(gè)維度，它們?cè)谄滹@示的平面上沒有透視感。

　　多年來，網(wǎng)絡(luò)一直是二維環(huán)境，我們習(xí)慣于沿兩個(gè)軸或方向（x軸（水平）和y軸（垂直））定位元素。

　　注意 ：腹板的y軸與原始笛卡爾坐標(biāo)原理相反，因?yàn)楦拱迨菑纳系较伦x取的。

　　投影3D視圖需要第三軸，即z軸。 該軸表示深度 ，并且對(duì)象沿z軸的移動(dòng)方向相對(duì)于我們的觀點(diǎn)； 它可能上下，上下或近距離移動(dòng)。

　　這三個(gè)軸可以應(yīng)用于CSS變換功能以創(chuàng)建3D投影。 在下面的演示中，我們使用 和函數(shù)創(chuàng)建一個(gè)矩形的等角投影：

　　現(xiàn)在我們有了等軸測(cè)投影基礎(chǔ)的基本原理，我們可以將其付諸實(shí)踐。 我們從HTML開始。

　　與Envato Elements主頁類似，我們具有網(wǎng)格布局。 我們的網(wǎng)格包括一行九列。 每列都包含一個(gè)產(chǎn)品圖片，指向產(chǎn)品頁面的鏈接，以及如下所示的元素，我們將使用該元素對(duì)圖像陰影進(jìn)行建模。

　　我們從重置某些元素的默認(rèn)樣式的樣式開始。

　　這些樣式使用設(shè)置所有元素，這將使確定元素的總大小更容易預(yù)測(cè)。 我們還將圖像渲染設(shè)置為以刪除圖像底部的空白。 最后，我們刪除包裹圖像的元素邊距。

　　然后，我們繼續(xù)行和列的樣式。

　　上面的樣式將行設(shè)置為 ，將變換樣式設(shè)置為3D，以便瀏覽器將正確遵循z軸變換，旋轉(zhuǎn)行以創(chuàng)建等軸測(cè)視圖，最后將行中的列分成兩半。

　　接下來，我們必須添加在3D視圖中放置行和列的子元素的樣式。 這種跟隨風(fēng)格至關(guān)重要。 必須在下包裝的每個(gè)元素上聲明   ，以便可以在3D空間（特別是在Firefox中）正確渲染它們，并且Z軸將生效。

　　接下來，我們將樣式添加到類（已添加到產(chǎn)品鏈接錨標(biāo)記中）和元素（不久將成為陰影）中。

　　添加了此樣式后，產(chǎn)品鏈接以及元素現(xiàn)在一直延伸到整個(gè)容器。 我們還可以稍后更改元素堆棧的位置。

　　以下樣式控制圖像包裝器元素的位置，填充和一些3D素材。 設(shè)置了 ，因此我們將看不到平移或旋轉(zhuǎn)元素下方的堆棧，也看不到圖像的反面。

　　我們對(duì)圖像應(yīng)用過渡，并在z軸上移動(dòng)以使其“懸浮”在陰影上方 。 同樣，我們還添加了一些3D內(nèi)容： 和 ，因此它將正確渲染3D視圖。

　　以下是我們的陰影樣式。 由于此時(shí)的圖像距離反射陰影的“地板”較近（  ），因此陰影散布應(yīng)較窄，陰影陰影應(yīng)較暗。

　　我們已經(jīng)取得了一些進(jìn)展：

　　懸停效果將使每個(gè)圖像縮略圖更具吸引力。

　　在懸停狀態(tài)下，如上面的代碼片段所示，我們將首先將元素堆棧上移更高，因此圖像（和鏈接）將出現(xiàn)在網(wǎng)格中其余項(xiàng)目的上方。

　　我們還將略微提升圖像； 將其從“地板”移開，并更靠近“光源”。 據(jù)說陰影應(yīng)該失去一些清晰度，因此我們降低了陰影的不透明度。

　　在本教程中，我們?cè)贑SS中使用了3D變換來構(gòu)建Envato Elements等距網(wǎng)格的副本。 我們還學(xué)習(xí)了如何在陰影和光源方面增加真實(shí)感。 看一下演示 ，獲取源文件 ，然后讓我們知道您對(duì)它們的處理方式！

　　3D變換是功能強(qiáng)大CSS實(shí)用程序。 但不要認(rèn)為它們只是在網(wǎng)絡(luò)上添加花式層的a頭或玩具。 如果認(rèn)真應(yīng)用，3D元素還可以解決一些臭名昭著的設(shè)計(jì)問題 。

關(guān)于“怎么使用CSS 3D變換創(chuàng)建等距布局”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。