CSS3 2D 轉換

Created: October-16, 2018

CSS3 2D 變換函式允許元素在 2D 空間中變換。

元素的二維轉換

使用 CSS3 2D 變換函式，你可以執行基本的變換操作，例如在二維空間中移動，旋轉，縮放和傾斜元素。

變換後的元素不會影響周圍的元素，但可以與它們重疊，就像絕對定位的元素一樣。但是，轉換後的元素仍然在佈局中佔用其預設（未轉換）位置的空間。

使用 CSS 變換和變換函式

CSS3 transform 屬性使用變換函式來操縱元素使用的座標系，以便應用變換效果。

以下部分描述了這些轉換函式：

`translate()` 函式

將元素從當前位置移動到沿 X 和 Y 軸的新位置。這可以寫成 translate(tx, ty) 。如果 ty 未指定，則假定其值為零。

img {
    -webkit-transform: translate(200px, 50px);  /* Chrome, Safari, Opera */
       -moz-transform: translate(200px, 50px);  /* Firefox */
        -ms-transform: translate(200px, 50px);  /* IE 9 */
            transform: translate(200px, 50px);  /* Standard syntax */    
}

translate(200px, 50px) 函式沿正 x 軸水平移動影象 200 畫素，沿正 y 軸垂直移動 50 畫素。

`rotate()` 函式

rotate() 函式將元素圍繞其原點（由 transform-origin 屬性指定）按指定的角度旋轉。這可以寫成 rotate(a) 。

img {
    -webkit-transform: rotate(30deg);  /* Chrome, Safari, Opera */
       -moz-transform: rotate(30deg);  /* Firefox */
        -ms-transform: rotate(30deg);  /* IE 9 */
            transform: rotate(30deg);  /* Standard syntax */    
}

函式 rotate(30deg) 將影象以順時針方向繞其原點旋轉 30 度角。你可以使用負值逆時針旋轉元素。

`scale()` 函式

scale() 函式增加或減少元素的大小。它可以寫成 scale(sx, sy) 。如果 sy 未指定，則假定它等於 sx 。

img {
    -webkit-transform: scale(1.5);  /* Chrome, Safari, Opera */
       -moz-transform: scale(1.5);  /* Firefox */
        -ms-transform: scale(1.5);  /* IE 9 */
            transform: scale(1.5);  /* Modern Browsers */    
}

函式 scale(1.5) 按比例縮放影象的寬度和高度 1.5 乘以其原始大小。函式 scale(1) 或 scale(1, 1) 對元素沒有影響。

`skew()` 函式

skew() 函式沿 X 軸和 Y 軸傾斜元素指定的角度。它可以寫成 skew(ax, ay) 。如果 ay 未指定，則假定其值為零。

img {
    -webkit-transform: skew(-40deg, 15deg);  /* Chrome, Safari, Opera */
       -moz-transform: skew(-40deg, 15deg);  /* Firefox */
        -ms-transform: skew(-40deg, 15deg);  /* IE 9 */
            transform: skew(-40deg, 15deg);  /* Modern Browsers */    
}

函式 skew(-40deg, 15deg) 沿 x 軸水平傾斜-40 度，沿 y 軸垂直傾斜 15 度。

`matrix()` 函式

matrix() 函式可以立即執行所有 2D 變換，例如平移，旋轉，縮放和傾斜。它採用矩陣形式的六個引數，可以寫成 matrix(a, b, c, d, e, f) 。以下部分將向你展示如何使用 matrix() 。表示每個 2D 轉換函式。

translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty); - 水平和垂直平移值的位置 tx 和 ty 位置。
rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0); - 其中 a 是以 deg 為單位的值。你可以交換 sin(a) 和 -sin(a) 值來反轉旋轉。你可以執行的最大旋轉是 360 度。
scale(sx, sy) = matrix(sx, 0, 0, sy, 0 ,0); - 水平和垂直縮放值的位置 sx 和 sy 位置。
skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0 ,0); -其中 ax 和 ay 是在度的水平和垂直值。

以下是使用 matrix() 函式執行 2D 變換的示例。

img {
    -webkit-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Chrome, Safari, Opera */
       -moz-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Firefox */
        -ms-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* IE 9 */
            transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Standard syntax */
}

但是，當一次執行多個轉換時，使用單個轉換函式並按順序列出它們會更方便，如下所示：

img {
    -webkit-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Chrome, Safari, Opera */
       -moz-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Firefox */
        -ms-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* IE 9 */
            transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Standard syntax */    
}

2D 變換函式

下表提供了所有 2D 轉換函式的簡要概述。

功能	描述
`translate(tx,ty)`	將元素沿 X 軸和 Y 軸移動給定量。
`translateX(tx)`	將元素沿 X 軸移動給定量。
`translateY(ty)`	將元素沿 Y 軸移動給定量。
`rotate(a)`	按照 `transform-origin` 屬性定義的元素原點周圍的指定角度旋轉元素。
`scale(sx,sy)`	按給定的量向上或向下縮放元素的寬度和高度。此函式 `scale(1,1)` 無效。
`scaleX(sx)`	按給定量向上或向下縮放元素的寬度。
`scaleY(sy)`	按給定量向上或向下縮放元素的高度。
`skew(ax,ay)`	將元素沿 X 軸和 Y 軸傾斜給定角度。
`skewX(ax)`	將元素沿 X 軸傾斜給定角度。
`skewY(ay)`	將元素沿 Y 軸傾斜給定角度。
`matrix(n,n,n,n,n,n)`	以包含六個值的變換矩陣的形式指定 2D 變換。

元素的二維轉換

使用 CSS 變換和變換函式

translate() 函式

rotate() 函式

scale() 函式

skew() 函式

matrix() 函式