CSS動畫愛好者經(jīng)常會用到透視（perspective）這個強大的工具。雖然透視屬性本身無法實現(xiàn)3D效果（因為基本形狀沒有深度），但您可以使用transform屬性在3D空間（X、Y和Z軸）移動和旋轉(zhuǎn)對象，然后使用透視來控制深度。

本文將從基礎(chǔ)知識開始，逐步講解透視的概念，最終創(chuàng)建一個完整的3D旋轉(zhuǎn)立方體動畫。

透視基礎(chǔ)

我們從一個簡單的綠色正方形開始，并在三個軸上移動它。

在X和Y軸上移動對象非常簡單，但如果在Z軸上移動它，看起來正方形保持不變。這是因為當對象在Z軸上移動時，動畫使它靠近我們，然后遠離我們，但正方形的大小（和位置）保持不變。這就是CSS perspective屬性發(fā)揮作用的地方。

雖然透視在對象在X或Y軸上移動時沒有影響，但當對象在Z軸上移動時，透視使正方形在靠近我們時看起來更大，在遠離我們時看起來更小。是的，就像在現(xiàn)實生活中一樣。

同樣的效果也發(fā)生在我們旋轉(zhuǎn)對象時：

在Z軸上旋轉(zhuǎn)正方形看起來像是我們都熟悉和喜愛的常規(guī)旋轉(zhuǎn)，但是當我們在X或Y軸上旋轉(zhuǎn)正方形（不使用透視）時，它看起來只是正方形變小（或變窄）而不是旋轉(zhuǎn)。但是當我們添加透視時，我們可以看到當正方形旋轉(zhuǎn)時，正方形的近側(cè)看起來更大，遠側(cè)看起來更小，旋轉(zhuǎn)看起來符合預(yù)期。

請注意，當對象在X或Y軸上的旋轉(zhuǎn)角度為90°（或270°、450°、630°等）時，它將“消失”在視野之外。同樣，這是因為我們無法向?qū)ο筇砑由疃?，在這個位置，正方形的寬度（或高度）實際上將為0。

透視值

我們需要使用一個值來設(shè)置perspective屬性。此值設(shè)置對象平面的距離，或者換句話說，透視的強度。值越大，您離對象越遠；值越小，透視效果越明顯。

透視原點

perspective-origin屬性確定您“觀察”對象的方位。如果原點居中（這是默認值）并且對象向右移動，則看起來您是從左側(cè)觀察它（反之亦然）。

或者，您可以將對象居中并移動perspective-origin。當原點設(shè)置為側(cè)面時，就像您從該側(cè)面“觀察”對象一樣。值越大，看起來越偏離中心。

變換

雖然perspective和perspective-origin都設(shè)置在元素的父容器上，并確定消失點的位置（即從您“觀察”對象的位置到對象平面的距離），但對象的位移和旋轉(zhuǎn)是使用transform屬性設(shè)置的，該屬性在對象本身上聲明。

如果您查看前面示例的代碼，我將正方形從一側(cè)移動到另一側(cè)，您會看到我使用了translateX()函數(shù)——這是有道理的，因為我想讓它沿X軸移動。但是請注意，它被分配給transform屬性。該函數(shù)是一種直接應(yīng)用于我們要轉(zhuǎn)換的元素的變換類型，但其行為符合分配給父元素的透視規(guī)則。

我們可以將多個函數(shù)“鏈接”到transform屬性。但是當使用多個變換時，需要考慮三件非常重要的事情：

1. 旋轉(zhuǎn)對象時，其坐標系會隨著對象一起變換。
2. 平移對象時，它相對于自身的坐標系移動（而不是其父坐標）。
3. 這些值的書寫順序會（并且會）改變最終結(jié)果。

為了獲得我在前面演示中想要的效果，我首先需要在X軸上平移正方形。只有這樣我才能旋轉(zhuǎn)它。如果這樣做順序顛倒（先旋轉(zhuǎn)，然后平移），則結(jié)果將完全不同。

為了強調(diào)值順序?qū)?code>transform屬性的重要性，讓我們來看幾個簡單的例子。首先，是對兩個正方形的簡單二維（2D）變換，這兩個正方形都具有相同的變換值，但聲明順序不同：

即使我們在Y軸上旋轉(zhuǎn)正方形，情況也是一樣的：

需要注意的是，雖然值的順序很重要，但我們可以簡單地更改值本身來獲得所需的結(jié)果，而不是更改值的順序。例如……

<code>transform: translateX(100px) rotateY(90deg);</code>

……與以下效果相同：

<code>transform: rotateY(90deg) translateZ(100px);</code>

這是因為在第一行中，我們在旋轉(zhuǎn)對象之前在X軸上移動了對象，但在第二行中，我們旋轉(zhuǎn)了對象，更改了其坐標，然后在Z軸上移動了它。相同的結(jié)果，不同的值。

讓我們看看更有趣的東西

當然，正方形是解釋透視一般概念的好方法，但是當我們分解成三維（3D）形狀時，我們才能真正看到透視是如何工作的。

讓我們使用到目前為止我們已經(jīng)介紹的所有內(nèi)容來構(gòu)建一個3D立方體。

HTML

我們將創(chuàng)建一個.container元素，它圍繞一個.cube元素，而.cube元素又包含六個元素，代表立方體的六個面。

<div class="container">
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side right"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
</div>

通用CSS

首先，我們將向父.container元素添加一些透視。然后，我們將確保.cube元素具有200px的邊長并遵守3D變換。我在這里添加了一些表現(xiàn)性樣式，但關(guān)鍵屬性已突出顯示。

/* 父容器，具有透視 */
.container {
  width: 400px;
  height: 400px;
  border: 2px solid white;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 800px;
  perspective-origin: top right;
}

/* 子元素，保留3D變換 */
.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
}

/* 立方體的面，絕對定位 */
.side {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  border: 2px solid white;
}

/* 立方體面的背景顏色，有助于可視化工作 */
.front { background-color: #d50000; }
.back { background-color: #aa00ff; }

.left { background-color: #304ffe; }
.right { background-color: #0091ea; }

.top { background-color: #00bfa5; }
.bottom { background-color: #64dd17; }

變換面

正面是最簡單的。我們將它向前移動100px：

.front {
  background-color: #d50000;
  transform: translateZ(100px);
}

我們可以通過添加translateZ(-100px)將立方體的背面向后移動。另一種方法是旋轉(zhuǎn)側(cè)面180deg，然后向前移動：

.back {
  background-color: #aa00ff;
  transform: translateZ(-100px);

  /* or */
  /* transform: rotateY(180deg) translateZ(100px); */
}

像背面一樣，我們可以通過幾種方法來變換左右側(cè)：

.left {
  background-color: #304ffe;
  transform: rotateY(90deg) translateZ(100px);

  /* or */
  /* transform: translateX(100px) rotateY(90deg); */
}

.right {
  background-color: #0091ea;
  transform: rotateY(-90deg) translateZ(100px);

  /* or */
  /* transform: translateX(-100px) rotateY(90deg); */
}

頂部和底部略有不同。我們不需要在Y軸上旋轉(zhuǎn)它們，而需要在X軸上旋轉(zhuǎn)它們。同樣，它可以通過幾種不同的方式完成：

.top {
  background-color: #00Bfa5;
  transform: rotateX(90deg) translateZ(100px);

  /* or */
  /* transform: translateY(-100px) rotateX(90deg); */
}

.bottom {
  background-color: #64dd17;
  transform: rotateX(-90deg) translateZ(100px);

  /* or */
  /* transform: translateY(100px) rotateX(90deg); */
}

這就得到了一個3D立方體！

隨意嘗試不同的perspective和perspective-origin選項，看看它們?nèi)绾斡绊懥⒎襟w。沒有一個“正確”的值，這些值因項目而異，因為它們?nèi)Q于動畫、對象的大小以及您想要實現(xiàn)的效果。

讓我們談?wù)?code>transform-style

我們將向立方體添加一些精美的動畫，但是讓我們首先討論transform-style屬性。我之前在通用CSS中添加了它，但并沒有真正解釋它是什么或它做什么。

transform-style屬性有兩個值：

• flat（默認值）
• preserve-3d

當我們將屬性設(shè)置為preserve-3d時，它會做兩件重要的事情：

1. 它告訴立方體的面（子元素）與立方體位于相同的3D空間中。如果未將其設(shè)置為preserve-3d，則默認值為flat，并且面在立方體的平面上被展平。preserve-3d將立方體的透視“復(fù)制”到其子元素（面），并允許我們僅旋轉(zhuǎn)立方體，因此我們不需要分別為每個面設(shè)置動畫。
2. 它根據(jù)子元素在3D空間中的位置顯示它們，而不管它們在DOM中的位置如何。

此示例中有三個正方形——綠色、紅色和藍色。綠色正方形的translateZ值為100px，這意味著它位于其他正方形的前面。藍色正方形的translateZ值為-100px，這意味著它位于其他正方形的后面。

但在DOM中，正方形的順序是：綠色、紅色、藍色。因此，當transform-style設(shè)置為flat（或根本未設(shè)置）時，藍色正方形將顯示在頂部，綠色正方形將在后面，因為這是DOM的順序。但是，如果我們將transform-style設(shè)置為preserve-3d，它將根據(jù)其在3D空間中的位置進行渲染。結(jié)果，綠色正方形將在前面，藍色正方形將在后面。

動畫

現(xiàn)在，讓我們?yōu)榱⒎襟w設(shè)置動畫！為了使事情更有趣，我們將動畫添加到所有三個軸。首先，我們將animation屬性添加到.cube。它現(xiàn)在還不會做任何事情，因為我們還沒有定義動畫關(guān)鍵幀，但是當我們這樣做時，它已經(jīng)到位了。

animation: cubeRotate 10s linear infinite;

現(xiàn)在是關(guān)鍵幀。我們基本上要沿每個軸旋轉(zhuǎn)立方體，使其看起來像在空間中滾動。

@keyframes cubeRotate {
  from { transform: rotateY(0deg) rotateX(720deg) rotateZ(0deg); }
  to { transform: rotateY(360deg) rotateX(0deg) rotateZ(360deg); }
}

perspective屬性實際上是賦予動畫深度的屬性，就像我們看到立方體向左和向右滾動，以及向前和向后滾動一樣。

但是在此之前，perspective屬性的值是一致的，perspective-origin也是如此。讓我們看看更改這些值如何影響立方體的外觀。

我已在此示例中添加了三個滑塊，以幫助查看不同的值如何影響立方體的透視：

• 左側(cè)滑塊設(shè)置perspective屬性的值。記住，此值設(shè)置對象平面的距離，因此值越小，透視效果越明顯。
• 另外兩個滑塊指的是perspective-origin屬性。右側(cè)滑塊在垂直軸上設(shè)置原點，從上到下，底部滑塊在水平軸上設(shè)置原點，從右到左。

請注意，在動畫運行時，這些變化可能不太明顯，因為立方體本身在旋轉(zhuǎn)，但是您可以通過單擊“運行動畫”按鈕輕松關(guān)閉動畫。

隨意嘗試這些值，并了解它們?nèi)绾斡绊懥⒎襟w的外觀。沒有一個“正確”的值，這些值因項目而異，因為它們?nèi)Q于動畫、對象的大小以及您想要實現(xiàn)的效果。

接下來的步驟？

既然您已經(jīng)掌握了CSS中perspective屬性的基礎(chǔ)知識，您可以發(fā)揮您的想象力和創(chuàng)造力，在您自己的項目中創(chuàng)建3D對象，為您的按鈕、菜單、輸入和其他任何您想要“賦予生命”的東西添加深度和趣味。

同時，您可以嘗試創(chuàng)建一些復(fù)雜的結(jié)構(gòu)和基于透視的動畫來練習和提高您的技能，例如這個、這個、這個，甚至這個。

我希望您喜歡閱讀這篇文章并在過程中學(xué)習到一些新東西！隨意留下評論，讓我知道您的想法，或者如果您對本文中的透視或任何其他主題有任何疑問，請在Twitter上給我留言。

以上是CSS觀點如何工作的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！