如何在CSS中使用2D變換功能

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

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

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

關鍵要點

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

rotate()

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

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

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

二維縮放函數：scale、scaleX和scaleY

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

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

小於0的值也會導致元素的大小縮放或減小，並創建反射（翻轉）變換。

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

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

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

二維平移函數：translateX、translateY和translate

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

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

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

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

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

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

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

變換屬性可能會出現在您附近的瀏覽器中

最新版本的CSS變換規範向CSS添加了translate、rotate和scale屬性。變換屬性的工作方式與其對應的變換函數非常相似，但值是空格分隔的，而不是逗號分隔的。例如，我們可以使用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)相同。使用這些屬性，我們可以單獨管理旋轉、平移或縮放變換，而不是其他變換。

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

skew、skewX和skewY

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

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

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

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

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

當前變換矩陣

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

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

這會產生如下所示的結果。

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

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

它給出瞭如下所示的結果。

如果你先旋轉元素，然後傾斜它會發生什麼？

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

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

每個變換都有一個不同的當前變換矩陣，該矩陣由其變換函數的順序創建。要完全理解原因，我們需要學習一些矩陣乘法。這也有助於我們理解matrix和matrix3d函數。

矩陣乘法和矩陣函數

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

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

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

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

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

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

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

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

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

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

這與以下內容的渲染效果相同：

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

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

關於CSS中二維變換函數的常見問題

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS中rotate()和skew()函數有什麼區別？

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

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

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

以上是如何在CSS中使用2D變換功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！