CSS動(dòng)畫愛好者經(jīng)常會用到透視（perspective）這個(gè)強(qiáng)大的工具。雖然透視屬性本身無法實(shí)現(xiàn)3D效果（因?yàn)榛拘螤顩]有深度），但您可以使用transform屬性在3D空間（X、Y和Z軸）移動(dòng)和旋轉(zhuǎn)對象，然后使用透視來控制深度。

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

透視基礎(chǔ)

我們從一個(gè)簡單的綠色正方形開始，并在三個(gè)軸上移動(dòng)它。

在X和Y軸上移動(dòng)對象非常簡單，但如果在Z軸上移動(dòng)它，看起來正方形保持不變。這是因?yàn)楫?dāng)對象在Z軸上移動(dòng)時(shí)，動(dòng)畫使它靠近我們，然后遠(yuǎn)離我們，但正方形的大?。ê臀恢茫┍３植蛔儭＿@就是CSS perspective屬性發(fā)揮作用的地方。

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

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

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

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

透視值

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

透視原點(diǎn)

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

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

變換

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

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

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

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

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

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

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

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

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

……與以下效果相同：

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

這是因?yàn)樵诘谝恍兄?，我們在旋轉(zhuǎn)對象之前在X軸上移動(dòng)了對象，但在第二行中，我們旋轉(zhuǎn)了對象，更改了其坐標(biāo)，然后在Z軸上移動(dòng)了它。相同的結(jié)果，不同的值。

讓我們看看更有趣的東西

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

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

HTML

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

<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; }

變換面

正面是最簡單的。我們將它向前移動(dòng)100px：

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

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

.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); */
}

這就得到了一個(gè)3D立方體！

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

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

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

transform-style屬性有兩個(gè)值：

• flat（默認(rèn)值）
• preserve-3d

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

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

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

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

動(dòng)畫

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

animation: cubeRotate 10s linear infinite;

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

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

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

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

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

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

請注意，在動(dòng)畫運(yùn)行時(shí)，這些變化可能不太明顯，因?yàn)榱⒎襟w本身在旋轉(zhuǎn)，但是您可以通過單擊“運(yùn)行動(dòng)畫”按鈕輕松關(guān)閉動(dòng)畫。

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

接下來的步驟？

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

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

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

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