如何使用 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);

很明顯，第二個正方形發生了一些重疊。 它可能看起來不像預期的那麼戲劇化，但添加透視屬性（本教程後面的內容）會有所幫助。

透視屬性已添加到此示例中。

旋轉

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。 這也可以添加到上面的屬性中。

如何使用 CSS3 過渡和變換來創建動畫

有趣的動畫可以使用 CSS3 通過使用變換和過渡來創建。 變換用於使元素從一種狀態更改為另一種狀態。 例如旋轉、移動、傾斜……

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

transform屬性如下所示： transform: perspective(600px); 透視屬性看起來像這樣： perspective: 600px; .

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

perspective的價值決定了 3D 效果的強度。 將低值視為非常明顯，例如當您查看大型物體時的感覺。 值越大，效果越不強烈。

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

左側的示例設置為大約 800 像素。 右側的透視圖更加劇烈，設置為 200 像素。

規模

比例Z（）

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

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

左側示例的值為 2，右側示例的值為 8。

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 矩陣可以取 6 個值，而 3D 矩陣需要 16 個（4×4 矩陣）！ 如果涵蓋了所有細節，這將是一個很長的帖子，所以如果你想更多地探索這個概念，我強烈推薦 Codepen 上的這個交互式 matrix3d 實驗。

這是 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 空間中“擺動”，而不是停留在父元素上。

如何創建具有 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);
 }

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

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