如何使用 CSS3 轉換屬性創建 3D 設計

涉及 CSS3 變換屬性時有兩個維度，2D 和 3D。 動畫時，變換用於使元素從一種狀態變為另一種狀態。 本教程是本指南關於 2D 動畫的擴展。 我將提供一些有關 3D 設計的見解，以及如何通過結合這些基本概念來創建出色的動畫。

3D 變換可能非常詳細，如果有很多不同的部分組合在一起可能會變得複雜，因此從基本構建塊開始是有幫助的。 其中一些概念看起來很熟悉，但“z”在 3D 中工作時看起來會很新鮮。 3D 變換擴展了 2D CSS 變換以包括 z 軸，允許對 DOM 元素進行 3D 變換。

什麼是 Z 軸？

z軸會有很多參考。 很容易將其視為某物朝向或遠離您的測量距離。 如果它是一個正值，它離你更近。 如果它是一個負值，它離你越遠。

3D 變換示例

3D 變換的基本屬性是translate3d 、 scale3d 、 rotateX 、 rotateY 、 rotateZ 、 perspective和matrix3d 。 更多參數包含在translate3d 、 scale3d和matrix3d中，因為它們接受 x、y 和 z 的參數。 scale 屬性接受一個角度值，perspective 也接受一個值。

翻譯

翻譯Z()

這通過僅使用 z 軸值定義 3D 平移。 您可能還記得從 2D 翻譯中翻譯 x 和 y。 這個想法與translateX() 、 translateY()和translateZ()相同，因為每個都採用一個長度值，使元素沿正確的軸移動指定的距離。

在此示例中， translateZ(-20px)會將元素移動到距查看器 20 像素的位置。

以下是創建此示例的代碼片段：

 -webkit-transform: translateZ(-20px); -ms-transform: translateZ(-20px); transform: translateZ(-20px);

翻譯3d()

translate3d()函數用於在 3D 空間中移動元素的位置。 這個變換是通過指定坐標來創建的，坐標定義了它在每個方向上移動的量。

函數transform: translate3d(20px, -15px, 70px); 將圖像沿正 x 軸移動 20 像素，沿負 y 軸移動 15 像素，然後沿正 z 軸移動 70 像素。

這是translate3d的示例：

 -webkit-transform: translate3d(20px, -15px, 70px); -ms-transform: translate3d(20px, -15px, 70px); transform: translate3d(20px, -15px, 70px);

很明顯，第二個正方形有一些重疊。 它可能看起來不像預期的那樣引人注目，但添加 perspective 屬性（在本教程的後面）會有所幫助。

旋轉

rotate3d()函數將元素在 3D 空間中繞軸旋轉指定角度。 這可以寫成rotate(x, y, z, angle) 。

旋轉X()

像素值在這裡不起作用，它需要以度為單位。 rotateX()方法以給定的度數圍繞其 x 軸旋轉元素。 看到矩形變短了嗎？ 它沿 x 軸旋轉。 此示例顯示了 55 度的旋轉。

 -ms-transform: rotateX(55deg); /* IE 9 */ -webkit-transform: rotateX(55deg); /* Safari */ transform: rotateX(55deg);

旋轉Y()

rotateY()方法圍繞其 y 軸旋轉元素。 請注意底部矩形不如頂部寬？ 它旋轉了 60 度，因此看起來不像上面的矩形那麼寬。

 -ms-transform: rotateY(60deg); /* IE 9 */ -webkit-transform: rotateY(60deg); /* Safari */ transform: rotateY(60deg);

旋轉Z()

rotateZ()方法將元素繞其 z 軸旋轉指定的度數。 在本例中，該值為 120 度。

 -ms-transform: rotateZ(120deg); /* IE 9 */ -webkit-transform: rotateZ(120deg); /* Safari */ transform: rotateZ(120deg);

旋轉 3d()

函數rotate3d(1, -1, 1, 45deg)將圖像沿 y 軸旋轉 45 度角。 請務必注意，您可以使用負值將元素沿相反方向旋轉。

由於這比單軸規範更複雜， rotate3d可以這樣分解： rotate3d(x,y,z,angle)其中 x=1，y=-1，z=1，旋轉角度 = 45 度.

設置樣式的代碼如下所示：

 -ms-transform: rotate3d(1, -1, 1, 45deg); /* IE 9 */ -webkit-transform: rotate3d(1, -1, 1, 45deg); /* Safari */ transform: rotate3d(1, -1, 1, 45deg);

測試基礎

沿 x 軸順時針旋轉 45 度。

 transform: rotate3d(1, 0, 0, 45deg);

沿 y 軸順時針旋轉 45 度。

 transform: rotate3d(0, 1, 0, 45deg);

沿 z 軸順時針旋轉 45 度。

 transform: rotate3d(0, 0, 1, 45deg);

值得一提的是，根據指定的值，有時旋轉並不明顯； 例如，這不會引起注意： transform: rotate3d(0, 0, 0, 50deg);

看法

這可能是最“維度”的轉變。 這是您真正獲得視角的地方。 如果在未設置透視的情況下對元素應用 3D 變換，則生成的效果將不會顯示為三維。 這也可以添加到上面的屬性中。

要激活 3D 空間，元素需要透視。 這可以通過兩種方式應用：使用transform屬性或perspective屬性。

transform屬性看起來像這樣： transform: perspective(600px); perspective 屬性看起來像這樣： perspective: 600px; .

以下示例將在兩者之間進行更改，因此請務必仔細查看代碼。

perspective值決定了3D效果的強烈程度。 將低值視為真正引人注目，就像您在看大物體時的感覺一樣。 值越大，效果越弱。

消失點的位置也可以自定義。 值得一提，並且需要進行大量實驗，因為它與 CSS 透視圖相關。 默認情況下，3D 空間的消失點位於中心。 使用 perspective-origin 屬性更改消失點的位置。 它看起來像： perspective-origin: 15% 55% 。

規模

縮放Z()

這通過為 z 軸提供一個值來定義 3D 比例轉換。 因為它只沿z軸縮放，所以需要其他函數來演示縮放效果。 看看矩形是如何朝向觀察者的，它是如何真正顯示透視的？

要完全理解 scale(Z)，請嘗試使用該值，您會發現視角隨著值的增大而變得“更清晰”。

scale3d(x,y,z)

scale3d()函數更改元素的大小並寫為scale(x, y, z) 。 與scaleZ一樣，除非與perspective一起使用，否則透視圖的完整外觀並不明顯。

這個例子使用這個：

 -ms-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* IE 9 */ -webkit-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* Safari */ transform: perspective(500px) scale3d(0.8, 2, 0.2);

快速說明：如果向量的所有三個坐標都相等，則縮放是統一的並且不會有明顯差異。

 transform: scale3d(1, 1, 1); /* unchanged */ transform: scale3d(2, 2, 2); /* twice the original size */

矩陣3d()

2D 矩陣可以有六個值，而 3D 矩陣有 16 個（4×4 矩陣）！ 如果涵蓋了所有細節，這將是一篇很長的文章，所以如果您想更多地探索這個概念，我強烈推薦 Codepen 上的這個交互式 matrix3d 實驗。

matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)

如何創建
具有 3D 變換的動畫

現在已經涵蓋了基礎知識，下一步是創建交互式動畫。 使用 CSS3 變換和過渡，元素通過旋轉、縮放或添加透視圖從一種狀態變為另一種狀態。

如果您不熟悉 CSS 動畫，請務必了解如果沒有轉換，正在轉換的元素會突然從一種狀態變為另一種狀態。 為防止這種情況，可以添加一個過渡，這樣您就可以控制變化，使其看起來更平滑。

如何創建卡片翻轉

誰不喜歡打牌？ 這個例子有一張雙面卡片，你可以通過轉換翻轉它來看到兩面。 如果你看一下body標籤，很多效果都來自perspective屬性。 它設置為 500px。 像 100px 這樣的較低值看起來非常“傾斜”。

這是開始的 HTML：

 <div class="wrapper"> div class="side-one"></div> <div class="side-two"></div> </div>

CSS 是讓它發生的原因：

 body { -webkit-perspective: 500px; perspective: 500px; } .wrapper { -webkit-transition: all 1s ease-in; transition: all 1s ease-in; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; margin: 100px auto; width: 250px; height: 250px; cursor: pointer; } .wrapper div { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; border-radius: 10px; background-position: 50% 50%; background-size: 150px; background-repeat: no-repeat; box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4); color: #FFF; text-align: center; text-shadow: 0 1px rgba(0,0,0,.3); } .side-one { z-index: 400; background: #50c6db url(image.png); } .side-two { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); background: #ef4e65 url(image.png); } .wrapper:hover { -webkit-transform: rotateY(-1turn); transform: rotateY(-1turn); }

這可以在 Codepen 上找到。

如果您不熟悉變換，這對您來說可能很有趣： transform: rotate(1turn); 這個單位非常適合我們的卡片，因為“轉”單位正是它聽起來的樣子，即一個完整的圓圈。

我還使用了一些緩動來製作自定義的旋轉方式。 這是通過transition: all 1s ease-in; .

片段中的另一個 3D 屬性是transform-style: preserve-3d; . 通過包含這一點，它允許元素在三維空間中“搖擺”，而不是留在父元素中。

如何創建具有 3D 效果的文本

這個例子的靈感來自於一張老電影海報。 有許多不同的字體可以利用出色的 CSS 樣式，因此絕對可以實現獨特的字體效果。 此文本使用rotate3d和transform3d來賦予其獨特的轉換。

HTML 非常簡單：

 <div class="container"> <div class="text-wrapper"> <div class="text">New York City</div> </div> </div>

這是基本的 CSS：

 .container{ -webkit-perspective: 600; } .text { transform: rotate3d(2, 2, .5, 22deg)translate3d(100px, 0px, 0px); }

可以在 Codepen 上找到更詳細的 CSS 和示例。

希望 CSS 3D 轉換為您的設計帶來新的維度。 利用透視是使元素看起來更有立體感的好方法。 結合過渡，創建動畫時有很多可能性。