摘錄自Tiffany新書(shū)《CSS大師，第二版》

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

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

關(guān)鍵要點(diǎn)

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

rotate()

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

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

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

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

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

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

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

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

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

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

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

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

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

translateX函數(shù)改變?cè)氐乃戒秩疚恢?。如果元素距左?cè)0像素，則transform: transitionX(50px)將其渲染位置向其起始位置右側(cè)移動(dòng)50像素。類(lèi)似地，translateY改變?cè)氐拇怪变秩疚恢?。transform: transitionY(50px)的變換將元素垂直偏移50像素。

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

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

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

平移對(duì)于將項(xiàng)目向左、向右、向上或向下移動(dòng)特別有用。更新left、right、top和bottom屬性的值會(huì)強(qiáng)制瀏覽器重新計(jì)算整個(gè)文檔的布局信息。但是，變換是在計(jì)算布局之后計(jì)算的。它們會(huì)影響元素在屏幕上的顯示位置，但不會(huì)影響其實(shí)際尺寸。是的，將文檔布局和渲染視為單獨(dú)的概念很奇怪，但在瀏覽器方面，它們確實(shí)是單獨(dú)的。

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

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

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

skew、skewX和skewY

傾斜變換會(huì)改變點(diǎn)之間的角度和距離，同時(shí)保持它們?cè)谕黄矫嫔稀A斜變換也稱(chēng)為剪切變換，它們會(huì)扭曲元素的形狀，如下所示，其中虛線表示元素的原始邊界框。

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

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

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

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

當(dāng)前變換矩陣

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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)容也適用于三維變換。第三維增加了深度的錯(cuò)覺(jué)。它還在新的函數(shù)和屬性的形式下帶來(lái)了一些額外的復(fù)雜性。

關(guān)于CSS中二維變換函數(shù)的常見(jiàn)問(wèn)題

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如何在CSS中動(dòng)畫(huà)化二維變換？

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

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

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

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

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

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