原文地址：CSS is magic, its time you try 3D

原文做者：Ankita Chakraborty

譯文出自：掘金翻譯計劃

本文永久連接：github.com/xitu/gold-m…

譯者：tong-h

校對者：Chorer PassionPenguin

CSS 是魔法, 是時候試試 3D 了

CSS transform 是 css 最全能，最神奇的屬性之一。它不只是在你的網站上實現平滑動畫的最佳方式，更是你創造奇蹟的一種方式。好比這個 🙀 —css

我先爲這幾個佔了你的網絡寬帶的動圖道歉，但我但願它是值得的！🤜🤛html

等下，這個立方體的兩個面不見了！！！前端

我是故意這麼作的，這樣就會更形象，也更容易理解。我會在文章末尾添加一個連接用於獲取上面示例的完整代碼！android

先說最重要的，Translate 是如何工做的？

translate 方法主要是將一個 html 元素從它真實的位置上移動，並且不會干擾佈局樹上的其餘兄弟或父級元素。簡單來講，translateX 方法是將元素左右移動，而 translateY 是上下移動元素。ios

但 Z 軸是什麼？

爲了更形象地瞭解 translate 是如何沿着 Z 軸工做的，想象一下你的 div 在你的屏幕中先後移動而不是上下或左右。css3

這怎麼可能？一個網站看上去就像是一本書中的一頁紙，對吧？怎麼可能會有東西從屏幕中跑出來向你靠近（或者遠離你）？git

你的 div 固然不會真的跑出來，但它給你一種感受好像它會。讓咱們一塊兒看看沿着不一樣的軸修改 translate 的值會怎樣。github

我不知道你怎麼想，但這個綠色的盒子看起來並不像是在靠近或者遠離我。👺後端

如何解決這個問題呢？咱們須要改變一下咱們的視角。😉安全

CSS 的 perspective 屬性

若是不設置正確的 perspective 值，你沒法在視覺上檢測到 Z 軸的改變。

perspective 屬性定義元素與用戶的距離。那麼，相比於一個較高的值，一個較低的值產生的 3D 效果會更強烈。

來源 —— W3 Schools

讓咱們給這三個方塊的父元素加上下面的 CSS ——

瞧：

rotate 方法

顧名思義，rotate 根據一個給定的角度，沿着某一個軸旋轉元素。但咱們須要一點視覺效果來展現 rotate 是如何沿着不一樣的軸工做的。

立方體

咱們終於能夠從立方體的面開始了！咱們將有四個面 —— bottom，front，back，left：

一樣的，我爲主要的包裹容器 box-wrapper 添加了一些 css。

注意我爲容器添加了 transform-style: preserve-3d，這是渲染 3D 子元素的一個重要步驟。每個面的寬高都是 200px，咱們須要記住這個值，由於咱們將依據每個面的尺寸爲每一個面添加 translate 值。

立方體的每個面都將是一個絕對的劃分，我添加了文字用於表明每個面。我爲每個面添加了 opacity: 0.5，這樣就能清楚地看到它們之間的重疊了。

爲了將 front 放到前面，咱們爲它添加 translateZ(100px)。

對，看起來就像這樣。🙁

那麼咱們怎麼使它 3D 化？咱們的 perspective 知識在這裏要派上用場了。

添加這個 css 到包裹容器的父級元素 box-container：

一樣的，爲了將 back 調後，咱們將爲它添加與 front 相反的 css。

效果 ——

你可以想象 front 向你靠近，back （黃色那個）離你遠去嗎？若是這仍然不足以描繪，那讓咱們試着把立方體的包裹容器旋轉一下：

很奇妙，對嗎？

下一步，咱們須要安頓 bottom 💁‍♀️，爲了將 bottom 放到適當的位置，咱們把他沿着 X 軸旋轉 ** 90 度**。

咱們還須要移動它的位置使它能正好在立方體的 front 和 back 之間。咱們能夠作的是移動 bottom 使其與 front 一致，而後旋轉它。聽起來有點困惑對嗎？

步驟 —— 1: 將 bottom 和 front 對齊

CSS:

效果:

步驟 —— 2: 將 bottom 旋轉 90 度

CSS:

Result:

bottom 看起來如今安全的在本身的位置上了。但 left 好像被困在了中間。🙍‍♀️ 首先咱們須要將它移動到旁邊而後旋轉它。讓咱們把他沿着 X 軸移動 -100px，而後在 Y 軸上旋轉它。

CSS:

效果:

看！咱們的近似立方體已經快完成了。我建議你在每個軸上都嘗試調整一下 translate 和 rotate 的值，嘗試添加頂面和右面去作一個完整的立方體。

如今，最後關鍵的一步，旋轉咱們的立方體 😍

CSS:

將上面的動畫添加到咱們的 box-wrapper 上 ——

效果 🤜🤛:

相同的工做代碼，參考[GitHub 倉庫]](github.com/ankita1010/… CSS 3D 這個魔法之池。💫

請注意 —— 我調整了 perspective 的值，以及添加了一些動畫來達到側面的最終位置，以更清楚地展現變化。我稍微旋轉了 box-wrapper，這樣從正確的角度看更明顯些。

乾杯！

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到掘金翻譯計劃對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

掘金翻譯計劃是一個翻譯優質互聯網技術文章的社區，文章來源爲掘金上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注掘金翻譯計劃、官方微博、知乎專欄。