您如何使用變換屬性旋轉，擴展，翻譯和偏斜元素？-css教學-PHP中文網

首頁

web前端

css教學

您如何使用變換屬性旋轉，擴展，翻譯和偏斜元素？

James Robert Taylor

Mar 20, 2025 pm 03:41 PM

CSS中的transform屬性是一種強大的工具，用於修改元素的視覺外觀而不破壞正常文檔流程。您可以將其用於不同類型的轉換的方法：

旋轉：
rotate功能使您可以在固定點旋轉元素（默認情況下，元素的中心）。您以度，Gradians，Readians或turn的程度指定旋轉角度。例如：
```
 <code class="css">transform: rotate(45deg);</code>
```
登入後複製
這將使元素順時針旋轉其中心。
規模：
scale功能會更改元素的大小。它可以採用一個或兩個值；一個值在水平和垂直方面均縮放，而兩個值則水平和垂直縮放。例如：
```
 <code class="css">transform: scale(2, 0.5);</code>
```
登入後複製
這將使元素寬兩倍，一半是高的。
翻譯：
translate函數從其當前位置移動一個元素。它可以分別用於水平和垂直運動的兩個值，或僅用於水平運動的單個值。例如：
```
 <code class="css">transform: translate(50px, 100px);</code>
```
登入後複製
這將使元素50像素向右移動，並將100像素向下移動。
偏斜：
skew函數沿X和Y軸偏向一個元素。像translate一樣，它可以分別採用一個或兩個值，分別影響水平和垂直偏斜。例如：
```
 <code class="css">transform: skew(30deg, 20deg);</code>
```
登入後複製
這將使沿X軸30度和沿Y軸20度的元素偏斜。

使用transform進行旋轉與縮放率涉及不同的變換，並且對元素具有明顯的影響：

旋轉會影響元件的方向，而不會改變其在佈局中的大小或位置。它將元素圍繞一個點旋轉，可以使用transform-origin屬性更改該點。旋轉對於創建動畫或效果很有用，而元素繞樞軸點轉動。
另一方面，縮放更改元素的大小。除非與翻譯結合使用，否則它可以在不影響文檔流中的位置，而不會影響其在文檔流中的位置。縮放對於縮放效果或調整元素的大小很有用，而不會改變其佈局影響。

這兩種轉換都可以平穩地動畫，並且經常用於組合以創造複雜的效果。

在單個CSS規則中將多個變換函數組合起來很簡單，但遵循特定順序，重要的是要理解，因為每個函數都按順序應用。操作順序是：

例如，將元素擴展到其原始大小的兩倍，然後將其旋轉45度，最後將其移動100像素，您將寫下：

 <code class="css">transform: scale(2) rotate(45deg) translate(0, 100px);</code>

登入後複製

該序列很重要，因為如果您在縮放之前旋轉元素，則旋轉角將應用於縮放尺寸，可能導致不同的視覺結果。

使用transform屬性時，請考慮以下瀏覽器兼容性問題：

較舊的瀏覽器： CSS3的一部分的transform屬性可能不支持舊版本的瀏覽器。例如，Internet Explorer支持從版本9開始的transform ，但它使用了不同的語法（ -ms-transform ）。對於較舊版本，您可能需要使用替代方法或後備。
供應商前綴：為了確保與不同的瀏覽器（尤其是較舊版本）的兼容性，您可能需要使用-webkit- -， -moz- ，-o-， -o-和-ms-等供應商前綴。例如：
```
 <code class="css">transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);</code>
```
登入後複製
3D變換：一些瀏覽器可能會出現3D變換的問題，尤其是較舊的移動瀏覽器。跨目標設備和瀏覽器進行測試至關重要。
性能：硬件加速度可以由transform屬性觸發，這對某些設備上的性能有益，但可能會導致其他設備的問題或不一致，尤其是在處理複雜的動畫或眾多元素時。