摘錄自Tiffany新書《CSS大師，第二版》

CSS變換功能賦予我們創(chuàng)造其他方法無法實現(xiàn)的效果和交互的能力。結(jié)合過渡和動畫，我們可以創(chuàng)建旋轉(zhuǎn)、舞動和縮放的元素和界面。特別是三維變換，可以模擬物理對象。本文將探討二維變換函數(shù)（三維函數(shù)在此處介紹）。

主要有四種二維變換函數(shù)：旋轉(zhuǎn)、縮放、傾斜和位移。另外六個函數(shù)允許我們沿單個維度變換元素：scaleX 和 scaleY；skewX 和 skewY；以及 translateX 和 translateY。

關(guān)鍵要點

• CSS中的四個主要二維變換函數(shù)是rotate、scale、skew和translate。這些函數(shù)使我們能夠創(chuàng)建其他方法無法實現(xiàn)的效果和交互，包括旋轉(zhuǎn)、舞動和縮放的元素和界面。
• rotate()函數(shù)圍繞變換原點（transform-origin）按指定角度旋轉(zhuǎn)元素?？梢皂槙r針或逆時針旋轉(zhuǎn)。 scale函數(shù)可以增加或減少元素在X維度、Y維度或兩者上的大小。 translate函數(shù)按指定距離偏移元素的繪製位置與其佈局位置的距離。
• 變換函數(shù)可以組合起來創(chuàng)建更複雜的變換。但是，應(yīng)用這些函數(shù)的順序很重要，因為它會顯著改變結(jié)果。這是因為瀏覽器將每個函數(shù)的矩陣相乘以創(chuàng)建一個新矩陣。
• 最新版本的CSS變換規(guī)範(fàn)向CSS添加了translate、rotate和scale屬性。這些屬性的工作方式與其對應(yīng)的變換函數(shù)非常相似，但值是空格分隔的，而不是逗號分隔的。這允許從其他變換中單獨管理旋轉(zhuǎn)、平移或縮放變換。但是，對這些屬性的瀏覽器支持仍然有限。

rotate()

旋轉(zhuǎn)變換圍繞變換原點（transform-origin）按指定角度旋轉(zhuǎn)元素。使用rotate()可以順時針（正角度值）或逆時針（負(fù)角度值）傾斜元素。其效果很像風(fēng)車或風(fēng)輪，如下所示。

rotate()函數(shù)接受角度單位的值。角度單位由CSS值和單位模塊級別3定義。這些可能是deg（度）、rad（弧度）、grad（梯度）或turn單位。一次完整的旋轉(zhuǎn)等於360deg、6.28rad、400grad或1turn。

除非進行動畫或過渡，否則超過一次旋轉(zhuǎn)的旋轉(zhuǎn)值（例如，540deg或1.5turn）將根據(jù)其餘值進行渲染。換句話說，540deg的渲染效果與180deg（540度減去360度）相同，1.5turn的渲染效果與.5turn（1.5 – 1）相同。但是，從0deg到540deg或從1turn到1.5turn的過渡或動畫將使元素旋轉(zhuǎn)一倍半。

二維縮放函數(shù)：scale、scaleX和scaleY

使用縮放函數(shù)，我們可以增加或減少元素在X維度（scaleX）、Y維度（scaleY）或兩者（scale）上的渲染大小。縮放如下圖所示，其中邊框表示框的原始邊界， 號表示其中心點。

每個縮放函數(shù)都接受一個乘數(shù)或因子作為其參數(shù)。這個乘數(shù)幾乎可以是任何正數(shù)或負(fù)數(shù)。不支持百分比值。大於1的正乘數(shù)會增加元素的大小。例如，scale(1.5)將元素在X和Y方向上的大小增加1.5倍。介於0和1之間的正乘數(shù)將減小元素的大小。

小於0的值也會導(dǎo)致元素的大小縮放或減小，並創(chuàng)建反射（翻轉(zhuǎn)）變換。

警告：使用scale(0)將導(dǎo)致元素消失，因為將數(shù)字乘以零的結(jié)果為零。

使用scale(1)創(chuàng)建恆等變換，這意味著它被繪製到屏幕上時就像沒有應(yīng)用縮放變換一樣。使用scale(-1)不會改變元素的繪製大小，但負(fù)值將導(dǎo)致元素被反射。即使元素沒有顯示變換，它仍然會觸發(fā)新的堆疊上下文和包含塊。

可以使用scale函數(shù)分別縮放X和Y維度。只需傳遞兩個參數(shù)：scale(1.5, 2)。第一個參數(shù)縮放X維度；第二個參數(shù)縮放Y維度。例如，我們可以使用scale(-1, 1)沿X軸單獨反射一個對象。傳遞單個參數(shù)將按相同的因子縮放兩個維度。

二維平移函數(shù)：translateX、translateY和translate

平移元素會按指定距離偏移其繪製位置與其佈局位置的距離。與其他變換一樣，平移元素不會改變其offsetLeft或offsetTop位置。但是，它會影響它在屏幕上的視覺位置。

每個二維平移函數(shù)（translateX、translateY和translate）都接受長度或百分比作為參數(shù)。長度單位包括像素（px）、em、rem和視口單位（vw和vh）。

translateX函數(shù)改變元素的水平渲染位置。如果元素距左側(cè)0像素，則transform: transitionX(50px)將其渲染位置向其起始位置右側(cè)移動50像素。類似地，translateY改變元素的垂直渲染位置。 transform: transitionY(50px)的變換將元素垂直偏移50像素。

使用translate()，我們可以使用單個函數(shù)垂直和水平移動元素。它最多接受兩個參數(shù)：X平移值和Y平移值。下圖顯示了具有translate(120%, -50px)變換值的元素的效果，其中左側(cè)綠色正方形位於原始位置，右側(cè)綠色正方形與其包含元素（虛線邊框）水平平移120%和垂直平移-50px。

向translate傳遞單個參數(shù)等效於使用translateX；Y平移值將設(shè)置為0。使用translate()是更簡潔的選擇。應(yīng)用translate(100px, 200px)等效於translateX(100px) translateY(200px)。

正平移值將元素移動到右側(cè)（對於translateX）或向下（對於translateY）。負(fù)值將元素移動到左側(cè)（translateX）或向上（translateY）。

平移對於將項目向左、向右、向上或向下移動特別有用。更新left、right、top和bottom屬性的值會強制瀏覽器重新計算整個文檔的佈局信息。但是，變換是在計算佈局之後計算的。它們會影響元素在屏幕上的顯示位置，但不會影響其實際尺寸。是的，將文檔佈局和渲染視為單獨的概念很奇怪，但在瀏覽器方面，它們確實是單獨的。

變換屬性可能會出現(xiàn)在您附近的瀏覽器中

最新版本的CSS變換規(guī)範(fàn)向CSS添加了translate、rotate和scale屬性。變換屬性的工作方式與其對應(yīng)的變換函數(shù)非常相似，但值是空格分隔的，而不是逗號分隔的。例如，我們可以使用rotate屬性表達transform: rotate3d(1, 1, 1, 45deg)：rotate: 1 1 1 45deg。類似地，translate: 15% 10% 300px在視覺上與transform: translate3d(15%, 10%, 300px)相同，scale: 1.5 1.5 3與transform: scale3d(1.5, 1.5, 3)相同。使用這些屬性，我們可以單獨管理旋轉(zhuǎn)、平移或縮放變換，而不是其他變換。

在撰寫本文時，對變換屬性的瀏覽器支持仍然非常稀疏。 Chrome和Samsung Internet開箱即用地支持它們。在Firefox 60及更高版本中，支持隱藏在一個標(biāo)誌後面；訪問about:config並將layout.css.individual-transform.enabled設(shè)置為true。

skew、skewX和skewY

傾斜變換會改變點之間的角度和距離，同時保持它們在同一平面上。傾斜變換也稱為剪切變換，它們會扭曲元素的形狀，如下所示，其中虛線表示元素的原始邊界框。

傾斜函數(shù)（skew、skewX和skewY）接受大多數(shù)角度單位作為參數(shù)。度、梯度和弧度是傾斜函數(shù)的有效角度單位，而turn單位（也許很明顯）不是。

skewX函數(shù)在X方向或水平方向上剪切元素（見下圖）。它接受一個參數(shù)，該參數(shù)必須是角度單位。正值將元素向左移動，負(fù)值將元素向右移動。

類似地，skewY在Y方向或垂直方向上剪切元素。下圖顯示了transform: skewY(30deg)的效果。原點右側(cè)的點將隨著正值的增加而向下移動。負(fù)值將這些點向上移動。

這就引出了skew函數(shù)。 skew函數(shù)需要一個參數(shù)，但最多可以接受兩個參數(shù)。第一個參數(shù)在X方向上傾斜元素，第二個參數(shù)在Y方向上傾斜元素。如果只提供一個參數(shù)，則第二個值假定為零，使其等效於僅在X方向上傾斜。換句話說，skew(45deg)的渲染效果與skewX(45deg)相同。

當(dāng)前變換矩陣

到目前為止，我們已經(jīng)分別討論了變換函數(shù)，但它們也可以組合起來。想要縮放和旋轉(zhuǎn)對象嗎？沒問題：使用變換列表。例如：

<code>.rotatescale {
    transform: rotate(45deg) scale(2);
}</code>

這會產(chǎn)生如下所示的結(jié)果。

使用變換函數(shù)時，順序很重要。這一點最好用圖示說明，所以讓我們來看一個例子來說明。以下CSS會傾斜和旋轉(zhuǎn)一個元素：

<code>.transformEl {
    transform: skew(10deg, 15deg) rotate(45deg);
}</code>

它給出瞭如下所示的結(jié)果。

如果你先旋轉(zhuǎn)元素，然後傾斜它會發(fā)生什麼？

<code>.transformEl {
    transform:  rotate(45deg) skew(10deg, 15deg);
}</code>

效果（如下所示）大相徑庭。

每個變換都有一個不同的當(dāng)前變換矩陣，該矩陣由其變換函數(shù)的順序創(chuàng)建。要完全理解原因，我們需要學(xué)習(xí)一些矩陣乘法。這也有助於我們理解matrix和matrix3d函數(shù)。

矩陣乘法和矩陣函數(shù)

矩陣是一個數(shù)字或表達式的數(shù)組，排列在一個矩形的行和列中。所有變換都可以使用4×4矩陣表示，如下所示。

此矩陣對應(yīng)於matrix3d函數(shù)，該函數(shù)接受16個參數(shù)，每個參數(shù)對應(yīng)於4×4矩陣的一個值。二維變換也可以使用3×3矩陣表示，如下所示。

此3×3矩陣對應(yīng)於matrix變換函數(shù)。 matrix()函數(shù)接受六個參數(shù)，每個參數(shù)對應(yīng)於值a到f。

每個變換函數(shù)都可以使用矩陣和matrix或matrix3d函數(shù)來描述。下圖顯示了scale3d函數(shù)的4×4矩陣，其中sx、sy和sz分別是X、Y和Z維度的縮放因子。

當(dāng)我們組合變換（例如transform: scale(2) translate(30px, 50px)）時，瀏覽器會將每個函數(shù)的矩陣相乘以創(chuàng)建一個新矩陣。這個新矩陣就是應(yīng)用於元素的矩陣。

但是矩陣乘法就是這樣：它不是可交換的。對於簡單的值，3×2的乘積與2×3的乘積相同。但是，對於矩陣，A×B的乘積不一定與B×A的乘積相同。讓我們來看一個例子。我們將計算transform: scale(2) translate(30px, 50px)的矩陣乘積。

我們的元素已按比例縮放了兩倍，然後水平平移60像素，垂直平移100像素。我們也可以使用matrix函數(shù)表示此乘積：transform: matrix(2, 0, 0, 2, 60, 100)。現(xiàn)在讓我們切換這些變換的順序，即transform: translate(30px, 50px) scale(2)。結(jié)果如下所示。

請注意，我們的對象仍然按比例縮放了兩倍，但在這裡它水平平移了30像素，垂直平移了50像素。使用matrix函數(shù)表示，這是transform: matrix(2, 0, 0, 2, 30, 50)。

還值得注意的是，繼承的變換函數(shù)與變換列表類似。每個子變換都乘以應(yīng)用於其父級的任何變換。例如，考慮以下代碼：

<code>.rotatescale {
    transform: rotate(45deg) scale(2);
}</code>

這與以下內(nèi)容的渲染效果相同：

<code>.transformEl {
    transform: skew(10deg, 15deg) rotate(45deg);
}</code>

在這兩種情況下，p元素的當(dāng)前變換矩陣都是相同的。儘管我們到目前為止一直關(guān)註二維變換，但上述內(nèi)容也適用於三維變換。第三維增加了深度的錯覺。它還在新的函數(shù)和屬性的形式下帶來了一些額外的複雜性。

關(guān)於CSS中二維變換函數(shù)的常見問題

CSS中有哪些不同類型的二維變換函數(shù)？

CSS中有多種類型的二維變換函數(shù)。這些包括translate()、rotate()、scale()、skew()和matrix()。每個函數(shù)都允許您以不同的方式操作元素。例如，translate()函數(shù)將元素從其當(dāng)前位置移動，而rotate()函數(shù)圍繞給定點旋轉(zhuǎn)元素。 scale()函數(shù)更改元素的大小，skew()函數(shù)沿X軸和Y軸扭曲元素。 matrix()函數(shù)將所有這些變換組合成一個。

如何在CSS中使用translate()函數(shù)？

CSS中的translate()函數(shù)用於將元素從其當(dāng)前位置移動。它有兩個參數(shù)：X軸值和Y軸值。例如，如果要將元素向右移動50像素，向下移動20像素，則可以使用以下代碼：transform: translate(50px, 20px);。這將移動元素到新位置，而不會影響頁面上其他元素的佈局。

我可以在CSS中組合多個二維變換函數(shù)嗎？

是的，您可以在CSS中組合多個二維變換函數(shù)。為此，只需在transform屬性中列出每個函數(shù)，並用空格分隔即可。例如，如果您想將元素縮放至其兩倍大小，然後將其旋轉(zhuǎn)45度，則可以使用以下代碼：transform: scale(2) rotate(45deg);。變換按列出的順序應(yīng)用。

CSS中matrix()函數(shù)的用途是什麼？

CSS中的matrix()函數(shù)是一個非常強大的變換函數(shù)，允許您同時執(zhí)行多個變換。它有六個參數(shù)，代表2×3矩陣的值。此矩陣用於執(zhí)行縮放、旋轉(zhuǎn)、傾斜和平移變換的組合。雖然它比其他變換函數(shù)更複雜，但它提供了對變換過程的高度控制。

CSS中skew()函數(shù)是如何工作的？

CSS中的skew()函數(shù)用於沿X軸和Y軸扭曲元素。它有兩個參數(shù)：X軸的傾斜角度和Y軸的傾斜角度。例如，如果您想沿X軸將元素傾斜30度，沿Y軸傾斜20度，則可以使用以下代碼：transform: skew(30deg, 20deg);。這將扭曲元素，產(chǎn)生一種傾斜效果。

我可以在CSS中對任何HTML元素使用二維變換函數(shù)嗎？

是的，您可以在CSS中對任何HTML元素使用二維變換函數(shù)。這包括塊級元素（如div）和內(nèi)聯(lián)元素（如span）。但是，請記住，變換的應(yīng)用方式可能會因元素的類型及其在佈局中的位置而異。

如果我不為CSS中的translate()函數(shù)指定單位會發(fā)生什麼？

如果您不為CSS中的translate()函數(shù)指定單位，則這些值將被視為像素值。這意味著transform: translate(50, 20);等效於transform: translate(50px, 20px);。但是，通常最好始終指定單位，以確保清晰性和一致性。

如何在CSS中動畫化二維變換？

您可以使用transition屬性在CSS中動畫化二維變換。此屬性允許您指定過渡的持續(xù)時間、計時函數(shù)和延遲。例如，如果您想在2秒內(nèi)動畫化旋轉(zhuǎn)，則可以使用以下代碼：transition: transform 2s; transform: rotate(45deg);。這將在指定的持續(xù)時間內(nèi)平滑地動畫化旋轉(zhuǎn)。

CSS中rotate()和skew()函數(shù)有什麼區(qū)別？

CSS中的rotate()和skew()函數(shù)都以不同的方式操作元素。 rotate()函數(shù)圍繞給定點旋轉(zhuǎn)元素，而skew()函數(shù)沿X軸和Y軸扭曲元素。這意味著rotate()會更改元素的方向，而skew()會更改元素的形狀。

我可以在CSS中將二維變換函數(shù)與其他CSS屬性一起使用嗎？

是的，您可以在CSS中將二維變換函數(shù)與其他CSS屬性一起使用。例如，您可以將transform屬性與border-radius屬性結(jié)合使用，以創(chuàng)建具有圓角的旋轉(zhuǎn)元素。但是，請記住，應(yīng)用屬性的順序會影響最終結(jié)果。

以上是如何在CSS中使用2D變換功能的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！