手把手教你玩轉 CSS3 3D 技術

要玩轉css3的3d，就必須瞭解幾個辭彙，便是透視(perspective)、旋轉(rotate)和移動(translate)。透視即是以現實的視角來看屏幕上的2D事物，從而展現3D的效果。旋轉則不再是2D平面上的旋轉，而是三維坐標系的旋轉，就包括X軸，Y軸，Z軸旋轉。平移同理。

當然用理論來說明，估計你還不明白。下麵是3個gif：

• 沿著X軸旋轉
  
• 沿著Y軸旋轉
  
• 沿著Z軸旋轉
  

旋轉應該沒問題了，那理解平移起來就比較容易了，就是在在X軸、Y軸、z軸移動。

你可能會說透視比較不好理解，下麵我介紹一下透視的幾個屬性。

perspective

perspective英文名便是透視，沒有這東西就沒辦法形成3D效果，但是這個東西是怎麼讓我們瀏覽器形成3D 效果的呢，可以看下麵這張圖，其實學過繪畫的應該知道透視關係，而這裡就是這個道理。

但是在css里它是有數值的，例如perspective: 1000px這個代表什麼呢？我們可以這樣理解，如果我們直接眼睛靠著物體看，物體就超大占滿我們的視線，我們離它距離越來越大，它在變小，立體感也就出來了是不是，其實這個數值構造了一個我們眼睛離屏幕的距離，也就構造了一個虛擬3D假象。

perspective-origin

由上面我們瞭解了perspective，而加上了這個origin是什麼，我們前面說的這個是眼睛離物體的距離，而這個就是眼睛的視線，我們的視點的不同位置就決定了我們看到的不同景象，預設是中心，為perspectice-origin: 50% 50%,第一個數值是 3D 元素所基於的 X 軸，第二個定義在 y 軸上的位置

當為元素定義 perspective-origin 屬性時，其子元素會獲得透視效果，而不是元素本身。必須與 perspective 屬性一同使用，而且隻影響 3D 轉換元素。(W3school)

transform-style

perspective又來了，沒錯，它是css中3D的關鍵，transform-style預設是flat，如果你要在元素上視線3D效果的話，就必須用上transform-style: preserve-3d,否則就只是平面的變換，而不是3D的變換

手把手帶你玩轉css3-3d

以上我們稍微瞭解概念，下麵就開始實戰吧！

我們看一個效果，是不是很酷炫~

如果圖片載入不出來，就直接訪問線上預覽，覺得可以的話記得給star咯hh

線上預覽    源碼下載

第一步：html結構

很簡單的一個容器包裹著一個裝了6個piece的piece-box

第二步： 加上必要的3D屬性，進入3D世界

通過上面的講解，應該對perspective比較熟悉了吧,

第三步：加入必要的樣式

當然，在你完成這步之後你還是只看到一個正方形，也就是我們的piece-6,因為我們的3Dtransform還沒開始

第四步：3D變換來襲

首先是實現走馬燈，我們先不要讓它走，先實現燈部分。

如何實現呢？因為要構成一個圓，圓是360度，而我們有6個piece，那麼，很容易想到，我們需要把每一個piece以遞增60度的方式rotateY，就變成如下

如何把他們從中心拉開呢？

這裡我們還要註意一點，在我們使元素繞Y軸旋轉以後，其實X軸和Z軸也會跟著旋轉，所所以正方體的每個面的垂直線還是Z軸，我們就只需要改變下translateZ的值,而當translateZ為正的時候，就朝著我們的方向走來，這樣就可以拉開了

但是拉開的距離如何衡量？

是不是一目瞭然了~

下麵我們再修改下css

是不是已經實現了走馬燈了？

第五步：animation讓3D動起來

要實現走馬燈動，其實很簡單，我們只要在piece-box上加上旋轉動畫就行了,5s完成動畫，從0度旋轉到360度

這裡就不放gif了~hhh是不是實現了酷炫的效果，還沒結束哦~更酷炫的正方體組裝

正方體，其實也不難實現，我這裡就不很詳細說了，你首先可以想象一個面，然後去拓展其他面如何去實現，比如我們把正方體的前面translateZ(100px）讓它靠近我們100px,然後後面translateZ(-100px）讓它遠離我們100px,左邊是先translateX(-100px再rotateY(90deg),右邊就是translateX(100px)再rotateY(90deg),上面是先translateY(-100px)，rotateX(90deg)，下麵是先translateY(100px)，rotateX(90deg)，只要我們寫進動畫，一切就大功告成。

css就為如下，以下就只放piece1，其他讀者可以自己類比實現，或者看我github的源碼

細心的讀者可以發現我用了一個animation-fill-mode: forwards;,這個其實就是讓這些piece保持動畫最後的效果，也就是正方體的效果，讀者可以不加試試看，那還是會恢複原樣。

最後就是正方體的旋轉了，前面我們的容器已經用過animation了,讀者可能會想我再加個class放animaiton不就行了，hhh，animaiton會覆蓋掉前面的，那前面的走馬燈的動畫就沒了，所以在html結構中，我再加了一個box包裹piece, 如下

<div class="container">     <div class="piece-box">         <div class="piece-box2"><!--新加的容器-->             <div class="piece piece-1"></div>             <div class="piece piece-2"></div>             <div 您的分享是我們最大的動力! -Advertisement- 更多相關文章 面向對象分析方法 前言 讀《大象》的這一章節感覺很有指導意義，雖然工程中不能全部實踐，但作為心法來驅動設計是綽綽有餘了。 特質 一切都是對象 在面向對象者的眼裡，一切有名字的東西都是對象，都應該使用對象的觀點來看待它、分析他。哪怕這個東西的名字叫某某業務流程，它仍然應該看作是一個對象，而不是一個過程。這意味著，無論什 ... web性能優化——瀏覽器相關 簡介 優化是一個持續的過程。所以儘可能的不要有人為的參與。所以能自動化的或者能從架構、框架級別解決的就最更高級別解決。 這樣即能實現面對開發人員是透明的、不響應，又能確保所有資源都是被優化過的。 場景 1. 確保靜態資源是有緩存。 2. 確保靜態資源的大小最小。 3. 確保載入的資源最少。 4. 確 ... web性能優化——簡介 簡介 性能優化的第一准則： 。幾乎絕大部分優化都圍繞這個來進行的。讓用戶最快的看到結果。 性能優化的第二準則： 。絕不提供多餘的信息。比如，靜態資源（圖片、css、js)壓縮，圖片的滾動載入，非同步請求，http請求合併等。 性能優化的第三準則： 。當前，這個的前提是已經把基本優化都做完了，才考慮這個 ... 1秒30000QPS，前後端設計思路 Q:現在有這樣一個需求，在一秒中有3萬的支付訂單請求，有什麼比較好的解決方案嗎？ PS:我們資料庫用的是oracle 程式是java spring mybatis dubbo mq等技術，現在有這樣一個場景 高併發寫 在一秒中有3萬的支付訂單請求有什麼比較好的解決方案嗎？ 主要優化哪方面 A1: 作 ... vs2013給項目統一配置boost庫 1.打開項目，然後點擊菜單中的 視圖->其他視窗->屬性管理器 2. 打開屬性管理器，點擊項目前的箭頭，展開項目，找到debug或者release下麵的Microsoft.Cpp.Win32.user這個屬性。 3. 雙擊會出現一個跟在項目上右鍵屬性一樣的視窗，修改裡面的“VC++目錄”。 4.對b ... vs配置boost庫 步驟： 1.在boost官網下載boost版本，以1.59.0為例。 2.解壓，解壓後可看到文件夾下有個bootstrap.bat文件。 註意： 如果有以下error: 'cl' 不是內部或外部命令，也不是可運行的程式 或批處理文件。 solution: 環境變數中加cl.exe的路徑到path中, ... qt5.4.0編譯錯誤 error1： 進程"C:\Qt\Qt5.4.0\Tools\QtCreator\bin\jom.exe"退出，退出代碼 2 solution:去工具->選項->構建和運行，不要使用jom代替nmake。OK，成功運行。 reason:用到：C:\Users\***\AppData\Local\Te ... 辦公室日常管理信息系統 軟體架構文檔 大三下學期，我們學習的軟體工程這門課的課程設計，主要是針對一個管理系統，從需求分析到概要設計再到詳細設計，還好，不要求寫代碼。 下麵是我做的辦公室日常信息管理系統的設計。 軟體架構文檔 1. 介紹 1.1 目的 這篇文檔提供了對辦公室日常信息管理系統架構的總攬，從不同的視角描述了該系統。包含架構分析 ... 一周排行 -Advertisement- 移動開發（一）：使用.NET MAUI開發第一個安卓APP 移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ... wpf ToggleButton選中效果和一個登錄界面 前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ... 彈幕樹洞項目功能新增篇 項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ... 第27篇 sqlserver2022詳細安裝步驟 話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ... .NET 開源高性能 MQTT 類庫 前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ... Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出 Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ... 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ... [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一) 1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ... 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ... 第28篇 如何.net中實現高效可靠數據同步api 通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ... 所有分類 NET技術 編程語言 軟件設計 WEB前端 手機開發 數據庫技術 操作系統