CSS transform 屬性用于對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、傾斜和平移等操作而不影響文檔流。其基本語(yǔ)法為 transform: 函數(shù)值，如 rotate()、scale()、translate() 和 skew()，多個(gè)函數(shù)用空格分隔并按從右到左順序執(zhí)行。與 top 和 left 不同，translate 通過 GPU 渲染，更適合動(dòng)畫，性能更佳。使用 transform-origin 可調(diào)整變換中心點(diǎn)，支持兩個(gè)或三個(gè)值定義原點(diǎn)位置。多個(gè)變換的順序會(huì)影響最終效果，需注意先執(zhí)行最右側(cè)函數(shù)。掌握這些要點(diǎn)可實(shí)現(xiàn)流暢且復(fù)雜的視覺效果。

CSS 的 transform 屬性可以讓你在不改變文檔流的前提下，對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、傾斜和平移等操作。它不僅簡(jiǎn)單有效，而且性能也還不錯(cuò)，適合做動(dòng)畫和交互效果。

如何使用 transform 基本語(yǔ)法？

transform 屬性接受一個(gè)或多個(gè)函數(shù)作為值，這些函數(shù)定義了你想要應(yīng)用的變換類型?；緦懛ㄈ缦拢?/p>

transform: rotate(30deg) scale(1.5);

你可以同時(shí)應(yīng)用多個(gè)變換，只需用空格分隔開即可。順序很重要，因?yàn)闉g覽器會(huì)按從右到左的順序執(zhí)行變換（即先 scale 再 rotate）。

常用變換函數(shù)包括：

• rotate() —— 旋轉(zhuǎn)
• scale() —— 縮放
• translate() —— 平移
• skew() —— 傾斜

比如你想讓一個(gè)按鈕點(diǎn)擊時(shí)放大一點(diǎn)并輕微旋轉(zhuǎn)，就可以這樣寫：

button:hover {
  transform: rotate(5deg) scale(1.1);
}

translate 和絕對(duì)定位有什么區(qū)別？

很多人會(huì)問：既然 translate 可以移動(dòng)元素，那它和 position: absolute; top: xx; left: xx 有什么不同？

其實(shí)它們的作用看起來相似，但底層機(jī)制不同。translate 是在 GPU 層面渲染的，更適合做動(dòng)畫，流暢性更好；而 top 和 left 觸發(fā)的是布局重排，性能上略遜一籌。

舉個(gè)例子，如果你想做一個(gè)滑動(dòng)出現(xiàn)的動(dòng)畫，使用 translate 比起直接改 top 值更推薦：

.slide-in {
  transform: translateY(-20px);
  opacity: 0;
  transition: all 0.3s ease;
}

.slide-in.active {
  transform: translateY(0);
  opacity: 1;
}

這樣動(dòng)畫會(huì)更順滑，特別是在移動(dòng)端設(shè)備上。

transform-origin 調(diào)整變換中心點(diǎn)

默認(rèn)情況下，變換是圍繞元素的中心點(diǎn)進(jìn)行的。但如果你希望繞著左上角旋轉(zhuǎn)，或者某個(gè)特定點(diǎn)縮放，就需要用到 transform-origin 屬性。

例如：

.box {
  transform: rotate(45deg);
  transform-origin: top left;
}

這會(huì)讓元素以左上角為軸心旋轉(zhuǎn)。這個(gè)屬性常用于圖標(biāo)動(dòng)畫、菜單展開收起等場(chǎng)景。

你可以設(shè)置兩個(gè)或三個(gè)值來控制原點(diǎn)位置，比如：

• transform-origin: 50% 50%（默認(rèn)，中心）
• transform-origin: left bottom
• transform-origin: 10px 20px

記住，調(diào)整 origin 會(huì)影響整個(gè)變換效果，所以調(diào)試時(shí)建議配合瀏覽器開發(fā)者工具查看變化。

多個(gè)變換如何組合？

前面提到過，多個(gè)變換之間是有順序的。雖然寫法是從左到右，但實(shí)際執(zhí)行順序是從右往左。

比如：

transform: rotate(30deg) translateX(100px);

其實(shí)是先向右移動(dòng) 100px，再整體旋轉(zhuǎn) 30 度。這時(shí)候你會(huì)發(fā)現(xiàn)元素的位置不是單純地向右移了 100px，而是繞著某點(diǎn)偏移了一段弧線。

如果你希望先旋轉(zhuǎn)再平移，就需要調(diào)換順序：

transform: translateX(100px) rotate(30deg);

理解這一點(diǎn)對(duì)制作復(fù)雜動(dòng)畫非常重要。如果你不確定順序帶來的影響，可以在瀏覽器里一點(diǎn)點(diǎn)試，觀察差異。

基本上就這些。掌握好 transform 的基礎(chǔ)用法和常見技巧，就能做出很多實(shí)用又好看的視覺效果了。

以上是使用CSS轉(zhuǎn)換屬性實(shí)施轉(zhuǎn)換的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！