怎么使用CSS 3D變換創建等距布局

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

　　css創建一個3d空間

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

　　我們將使用CSS 3D變換來重新創建此等軸測圖。

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

　　這不是我們在現實生活中遇到的三個維度，它們在其顯示的平面上沒有透視感。

　　多年來，網絡一直是二維環境，我們習慣于沿兩個軸或方向（x軸（水平）和y軸（垂直））定位元素。

　　注意 ：腹板的y軸與原始笛卡爾坐標原理相反，因為腹板是從上到下讀取的。

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

　　這三個軸可以應用于CSS變換功能以創建3D投影。 在下面的演示中，我們使用 和函數創建一個矩形的等角投影：

　　現在我們有了等軸測投影基礎的基本原理，我們可以將其付諸實踐。 我們從HTML開始。

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

　　我們從重置某些元素的默認樣式的樣式開始。

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

　　然后，我們繼續行和列的樣式。

　　上面的樣式將行設置為 ，將變換樣式設置為3D，以便瀏覽器將正確遵循z軸變換，旋轉行以創建等軸測視圖，最后將行中的列分成兩半。

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

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

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

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

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

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

　　我們已經取得了一些進展：

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

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

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

　　在本教程中，我們在CSS中使用了3D變換來構建Envato Elements等距網格的副本。 我們還學習了如何在陰影和光源方面增加真實感。 看一下演示 ，獲取源文件 ，然后讓我們知道您對它們的處理方式！

　　3D變換是功能強大CSS實用程序。 但不要認為它們只是在網絡上添加花式層的a頭或玩具。 如果認真應用，3D元素還可以解決一些臭名昭著的設計問題 。

關于“怎么使用CSS 3D變換創建等距布局”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。