3D中的CSS：學會在多維數據集而不是盒子中思考

我進入CSS的旅程不是您典型的前端開發人員的故事。我最初是Java程序員，我的最初CSS體驗僅限於Visual Studio中的顏色選擇。

我對前端開發以及隨後的CSS的熱情稍後引發，與CSS3的興起相吻合。 3D和動畫的魅力吸引了我，比佈局或色彩理論更深刻地塑造了我對CSS的理解。

花了大量時間製作3D CSS效果，我已經完善了工作流程。本文分享了我當前的方法，提供了提高3D CSS技能的技巧和技巧。

Cuboid：您的基本構建塊

對於大多數3D創作，Cuboid用作主要元素。儘管更複雜的形狀是可以實現的，但他們要求更加關注細節。曲線特別是目前的挑戰，儘管存在解決方案的技術（稍後討論）。

創建基本的立方體不涵蓋；有關指導，請參閱Ana Tudor的出色帖子或此屏幕截圖。本質上，父元素封裝了cuboid，其中包含六個代表其面部的子元素。至關重要的是， transform-style: preserve-3d;必須應用於全球理想的應用：

 * {轉換風格：Preserve-3d; }

對於復雜的3D模型，將整個場景視為立方體的組裝。考慮一本3D書：四個立方體 - 每個蓋子，一個用於脊柱，一本用於頁面 - 背景圖像增加了修飾觸感。

場景建設：建立基礎

將長方體視為樂高積木。簡化過程涉及創建“平面”元素，這是您3D模型所在的基礎表面。這簡化了旋轉和移動。

我首選的方法首先是沿X和Y軸旋轉平面，然後用rotateX(90deg)將其扁平化。隨後，添加新的立方體涉及將它們放置在平面元件中，使用position: absolute用於精確定位。

 。飛機 {
  變換：rotatex（calc（-var（-otate-x，-24） * 1deg））rotatey（calc（var（ -  rotate-y，-24） * 1deg））rotatex（90deg）translate3d（0，0，0，0）;
}

用樣板和哈巴狗簡化開發

創建眾多立方體的重複性需要一種簡化的方法。我利用Pug（一種模板發動機）通過混合蛋白生成長方體結構。 （如果需要的話，可以進行快速的哈巴狗介紹。）

使用哈巴狗的典型場景結構看起來像這樣：

 Mixin Cuboid（className）
  .cuboid（class = className）
    // cuboid的每個臉的六個div元素...

我的Cuboid類的相應CSS是：

 .cuboid {
  // ...（CSS用於立方樣式）...
}

...（CSS規則針對Cuboid的每個臉）...

利用CSS變量的力量

CSS變量（自定義屬性）的廣泛使用可顯著提高效率。我的立方體是由變量驅動的：

• --width ：飛機上的立方寬度
• --height ：飛機上的長方體高度
• --depth ：立方深度
• --x ：x在飛機上的位置
• --y ：y在飛機上的位置

vmin主要用於響應尺寸。飛機鋪設平坦，允許直觀的高度，寬度和深度參考。

與DAT.GUI進行調試：實時控制和檢查

方便的DAT.GUI庫有助於實時調試。它允許在運行時修改CSS變量，從而輕鬆調整旋轉，位置和尺寸。使用DAT旋轉飛機。 Gui有助於可視化空間關係。

居中和定位：精確和組織

每個立方有意居中，在平面上方的一半上方和一半以上。這簡化了動畫，尤其是z軸旋轉。對於復雜的場景，子平台增強了組織，可以獨立地操縱部分。

美學：改進和視覺吸引力

結構完成後，重點轉移到美學。 CSS變量對顏色和陰影的一致使用會增強視覺和諧。背景圖像和偽元素增加了細節和紋理。 brightness()等過濾器可以巧妙地調整面部的陰影。

深度的幻象：煙與鏡子技術

有時，“人造” 3D效應會產生令人信服的深度，而元素較少。策略性定位和旋轉的平坦元素可以模仿3D形狀。

解決不規則形狀：解決創意問題

不規則形狀需要逐案溶液。多邊形可以近似曲線，而透視技巧可以產生深度的幻想。

Z戰鬥：解決重疊元素衝突

Z-Righting（在其中重疊的元素閃爍）通過仔細的DOM訂購和輕微的位置偏移來解決，以防止衝突。

結論：啟動您的3D CSS旅程

接受3D CSS的挑戰，嘗試不同的技術，並分享您的創作。請記住，耐心和創造力是這項有益的努力的關鍵要素。

以上是3D中的CSS：學會在多維數據集而不是盒子中思考的詳細內容。更多資訊請關注PHP中文網其他相關文章！