版本：CSS3

CSS數據類型用于對元素的顯示做變換。通常，這種變換可以由矩陣表示，并且可以使用每個點上的矩陣乘法來確定所得到的圖像。

瀏覽器支持

瀏覽器都支持數據類型

2D圖形的坐標系統

目前有多種用來描述轉換坐標模型，最常用的是笛卡爾坐標系統和齊次坐標

笛卡爾坐標

在笛卡爾坐標系中，每個歐氏空間里的點都由橫坐標和縱坐標這兩個值來確定。在CSS（和大部分的計算機圖形學）中，原點(0, 0)在元素的左上角。每個點都使用數學上的向量符號(x,y)來描述。

每個線性函數使用 2 × 2 矩陣描述，如:

a cb d

將矩陣乘法用于上述坐標系中的每個點，一個變換就形成了：

可以在一行中進行多次矩陣乘法進行變換：

有了這種方法，就可以描述大部分常見的變換并因此可以將他們組合起來，如：旋轉、縮放或拉伸。（事實上，所有線性函數的變換都可以被描述。）組合的變換是從右到左生效的。然而，有一種常見的變換并不是線性的，所以當這種變換要用這種方法來表示時，應該被單獨列出來：位移。位移的向量(tx, ty)必須單獨表示，作為兩個附加參數。

齊次坐標

奧古斯特·費迪南德·莫比烏斯的齊次坐標系表示了一個 3 × 3 的變換矩陣，雖然它對于非專業的人來說更復雜和少見，這并不影響將它表示為線性函數，并且這樣就不需要考慮額外的特例。

matrix()

CSS 函數 matrix()用六個指定的值來指定一個均勻的二維（2D）變換矩陣。這個矩形中的常量值是不作為參數進行傳遞的，其他的參數則在主要列的順序中描述。

matrix(a, b, c, d, tx, ty)是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)的簡寫

語法

matrix(a, b, c, d, tx, ty)

• a b c d：以的格式來描述線性變換
• tx ty：以的格式來描述變換的量

笛卡爾坐標系中用二階矩陣表示的點坐標齊次坐標系中用三階矩陣表示的點坐標笛卡爾坐標系中用三階矩陣表示的點坐標齊次坐標系中用四階矩陣表示的點坐標

a td>ctd>tr>table>fenced>ath> b td>dtd>tr>	a td>c td>tytd>tr>table>fenced>ath> b td>d td>txtd>tr> 0 td>0 td>1td>tr>	a td>c td>tytd>tr>table>fenced>ath> b td>d td>txtd>tr> 0 td>0 td>1td>tr>	a td>c td>0 td>txtd>tr>table>fenced>ath> b td>d td>0 td>tytd>tr> 0 td>0 td>1 td>0td>tr> 0 td>0 td>0 td>1td>tr>
[a b c d tx ty]

matrix3d()

CSS 函數 matrix3d()用一個 4 × 4 的齊次矩陣來描述一個三維（3D）變換。16個參數都在主要列的順序中描述。

語法

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

• a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4：以的格式來描述線性變換
• a4 b4 c4：以的格式來描述變換的量

笛卡爾坐標系中用二階矩陣表示的點坐標齊次坐標系中用三階矩陣表示的點坐標笛卡爾坐標系中用三階矩陣表示的點坐標齊次坐標系中用四階矩陣表示的點坐標

這個變換是屬于 3D 空間的，并不適用于這兩種情況。	笛卡爾坐標矩陣不允許由一般的三維仿射變換來作為平移，因為平移不是線性變換。	a1 td>a2 td>a3 td>a4td>tr>b1 td>b2 td>b3 td>b4td>tr>table>fenced>ath>c1 td>c2 td>c3 td>c4td>tr>d1 td>d2 td>d3 td>d4td>tr>

perspective()

perspective()這個CSS函數定義了 z=0平面與用戶之間的距離，以便給三維定位元素一定透視度。當每個3D元素的z>0時會顯得比較大，而在z-sin(a)td>tr>sin(a)td>cos(a)td>tr>table>fenced>ath>

cos(a)td>-sin(a)td>0td>tr>sin(a)td>cos(a)td>0td>tr>0td>0td>1td>tr>table> fenced> ath>cos(a)td>-sin(a)td>0td>tr>sin(a)td>cos(a)td>0td>tr>0td>0td>1td>tr>table> fenced> ath>cos(a)td>-sin(a)td>0td>0td>tr>sin(a)td>cos(a)td>0td>0td>tr>0td>0td>1td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>[cos(a)sin(a)-sin(a)cos(a)0 0]

rotate3d()

rotate3d()這個CSS 函數定義一個3D旋轉功能，該旋轉使元素能夠繞固定軸移動而不變形。其中移動量由指定角度定義；如果為正值，則運動將為順時針，如果為負值，則為逆時針。

在三維空間中，旋轉有三個自由度，各表示某條旋轉軸。旋轉軸由[x，y，z]向量定義，且過原點（由 transform-origin CSS屬性定義）。如果向量沒有標準化，即它的三個坐標的平方之和不是1，它將在內部被標準化。不可標準化的向量，如空向量[0,0,0]，將導致旋轉不被應用，但不會影響整個CSS屬性。

語法

rotate3d(x, y, z, a)

• x：該參數為類型值，描述旋轉軸向量的x坐標。
• y：該參數為類型值，描述旋轉軸向量的y坐標。
• z：該參數為類型值，描述旋轉軸向量的z坐標。
• a：該參數為代表旋轉的角度。正角度表示順時針旋轉，負角度表示逆時針旋轉。

Cartesian coordinates on ?2Homogeneous coordinates on ??2Cartesian coordinates on ?3Homogeneous coordinates on ??3

這個變換是屬于 3D 空間的，并不適用于這兩種情況。	1+o>(1-o>cos(ai>))(xi>2n>sup>-o>1)td>zi>·o>sin(ai>)+xi>yi>(1-o>cos(ai>))td>-o>yi>·o>sin(ai>)+o>xi>zi>·o>(1-o>cos(ai>))td>tr>-o>zi>·o>sin(ai>)+o>xi>yi>·o>(1-o>cos(ai>))td>1+(1-cos(a))(y2-1)td>xi>·o>sin(ai>)+o>yi>zi>·o>(1-o>cos(ai>))td>ysin(a)+ xz(1-cos(a))td>-xsin(a)+yz(1-cos(a))td>1+(1-cos(a))(z2-1)td>ttd>tr>0td>0td>0td>1td>tr> tr>table>fenced>ath>

rotateX()

rotateX()這個CSS 函數定義了將元素在橫坐標上旋轉而不使其變形的方法。其運動的程度由指定的角度來定義；如果是正的，則為順時針旋轉，如果是負的，則是逆時針旋轉。

旋轉所經過的原點，由 transform-origin CSS屬性定義。

rotateX(a)是 rotate3D(1, 0, 0, a)的簡寫形式。

語法

rotateX()

• ：代表旋轉的角度。正角表示順時針旋轉，負角表示逆時針旋轉。

Cartesian coordinates on ?2Homogeneous coordinates on ??2Cartesian coordinates on ?3Homogeneous coordinates on ??3

這個變換是屬于 3D 空間的，并不適用于這兩種情況。	1td>0td>0td>tr>0td>cos(a)td>-sin(a)td>tr>0td>sin(a)td>cos(a)td>tr>table> fenced> ath>	1td>0td>0td>0td>tr>0td>cos(a)td>-sin(a)td>0td>tr>0td>sin(a)td>cos(a)td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>

rotateY()

rotateY()這個CSS 函數定義了將元素在縱坐標上旋轉而不使其變形的方法。其運動的程度由指定的角度來定義；如果是正的，則為順時針旋轉，如果是負的，則是逆時針旋轉。

旋轉所經過的原點，由 transform-origin CSS屬性定義。

rotateY(a)是 rotate3D(0, 1, 0, a)的簡寫形式。

語法

rotateY()

• ：代表旋轉的角度。正角表示順時針旋轉，負角表示逆時針旋轉。

Cartesian coordinates on ?2Homogeneous coordinates on ??2Cartesian coordinates on ?3Homogeneous coordinates on ??3

這個變換是屬于 3D 空間的，并不適用于這兩種情況。	cos(a)td>0td>sin(a)td>tr>0td>1td>0td>tr>-sin(a)td>0td>cos(a)td>tr>table> fenced> ath>	cos(a)td>0td>sin(a)td>0td>tr>0td>1td>0td>0td>tr>-sin(a)td>0td>cos(a)td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>

rotate

rotateZ()這個CSS 函數定義了將元素在z軸上旋轉而不使其變形的方法。其運動的程度由指定的角度來定義；如果是正的，則為順時針旋轉，如果是負的，則是逆時針旋轉。

旋轉所經過的原點，由 transform-origin CSS屬性定義。

rotateZ(a)是 rotate3D(0, 0, 1, a)的簡寫形式。

語法

rotateZ()

• ：代表旋轉的角度。正角表示順時針旋轉，負角表示逆時針旋轉。

Cartesian coordinates on ?2Homogeneous coordinates on ??2Cartesian coordinates on ?3Homogeneous coordinates on ??3

這個變換是屬于 3D 空間的，并不適用于這兩種情況。	cos(a)td>-sin(a)td>0td>tr>sin(a)td>cos(a)td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	cos(a)td>-sin(a)td>0td>0td>tr>sin(a)td>cos(a)td>0td>0td>tr>0td>0td>0td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>

scale()

The scale()CSS 函數可改變元素的大小。它可以增大或減小元素的大小，并且縮放量由矢量定義，并且它可以使在一個方向上比另一個方向更多。這種變換的特點是矢量的坐標可定義在每個不同方向上各子完成一定比例縮放。如果矢量的兩個坐標相等，則縮放是均勻的或各向同性的，并且元素的形狀被保留。在這種情況下，縮放函數定義了一個同調變換。

當超出[-1, 1]范圍外時，縮放將在坐標方向上放大元素；當在該范圍內時，它在該方向收縮元素。當等于1時，它什么也不做，當它為負時，它執行點反射和大小修改。

語法

scale(sx | sx, sy)

• sx：該參數為類型值，代表縮放矢量的橫坐標。
• sy：該參數為類型值，代表縮放矢量的縱坐標。如果不存在，則其默認值為 sx，從而導致保持元素形狀進行均勻縮放。

scale3d()

scale3d() CSS 函數可改變元素的大小。由于縮放的量由矢量定義，因此可以改變不同方向的尺寸。

這種變換的特點是矢量的坐標定義在每個方向上完成多少縮放。如果矢量的三個坐標都相等，則縮放是均勻的或各向同性的，并且保持元素形狀。在這種情況下，這個縮放函數就是定義了一個同調變換。

當超出[-1，1]的范圍之外時，縮放比例將在坐標方向上放大元素；當在[-1，1]范圍內時，它在當前方向收縮元素。當等于1時，它什么也不做，當它為負時，它執行點反射和大小修改。

語法

scale3d(sx,sy,sz)

參數

sx該參數為的數據值。代表縮放矢量的橫坐標。sy該參數為的數據值。代表縮放矢量的縱坐標。sz該參數為的數據值。代表縮放矢量的z軸坐標。Cartesian coordinates on ?2Homogeneous coordinates on ??2Cartesian coordinates on ?3Homogeneous coordinates on ??3

這個變換是屬于 3D 空間的，并不適用于這兩種情況。	sx0td>0td>tr>0sytd>0td>tr>0td>0td>sztd>tr>table> fenced> ath>	sx0td>0td>0td>tr>0sytd>0td>0td>tr>0td>0td>sztd>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>

scaleX()

scaleX()這個CSS函數是用一個常數因子來修改每個單元點的橫坐標，在比例因子是1的情況下該函數是恒等變換?？s放不是各向同性的，元素的角度也不守恒。

scaleX(sx)是scale(sx, 1)和scale3d(sx, 1, 1)的簡寫形式。

scaleX(-1)表示通過原點的垂直軸定義軸對稱（由屬性指定）。

語法

scaleX(s)

參數

s該參數為的數據值。表示在元素的每個點的橫坐標上應用的縮放因子。Cartesian coordinates on ?2Homogeneous coordinates on ??2Cartesian coordinates on ?3Homogeneous coordinates on ??3

std>0td>tr>0td>1td>tr> table> fenced> ath>	s0td>0td>tr>01td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	s0td>0td>tr>01td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	s0td>0td>0td>tr>01td>0td>0td>tr>0td>0td>1td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>
[s 0 0 1 0 0]

scaleY()

scaleY()這個 CSS函數用一個常數因子修改每個元素點的縱坐標，在比例因子是1的情況下該函數是恒等變換。縮放不是各向同性的，元素的角度不守恒。

scaleY(sy)是scale(1, sy)和scale3d(1, sy, 1)的簡寫形式。

scaleY(-1)定義了通過原點的水平軸的軸對稱（由屬性指定）。

語法

scaleY(s)

參數

s該參數為的數據值。表示在元素的每個點的縱坐標上應用的縮放因子。Cartesian coordinates on ?2Homogeneous coordinates on ??2Cartesian coordinates on ?3Homogeneous coordinates on ??3

10td>tr>0td>std>tr> table> fenced> ath>	10td>0td>tr>0std>0td>tr>0td>0td>1td>tr>table> fenced> ath>	10td>0td>tr>0std>0td>tr>0td>0td>1td>tr>table> fenced> ath>	10td>0td>0td>tr>0std>0td>0td>tr>0td>0td>1td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>
[1 0 0 s 0 0]

scaleZ()

scaleZ()這個CSS函數是用一個常數因子來修改每個單元點的z軸坐標，在比例因子是1的情況下該函數是恒等變換。縮放不是各向同性的，元素的角度也不守恒。

scaleZ(sz)是scale3d(1, 1, sz)的簡寫形式。

scaleZ(-1)定義了通過原點的z軸的軸對稱（由屬性指定）。

語法

scaleZ(s)

參數

s該參數為的數據值。表示在元素的每個點的z軸坐標上應用的縮放因子。Cartesian coordinates on ?2Homogeneous coordinates on ??2Cartesian coordinates on ?3Homogeneous coordinates on ??3

這個變換是屬于 3D 空間的，并不適用于這兩種情況。	10td>0td>tr>01td>0td>tr>0td>0td>std>tr>table> fenced> ath>	10td>0td>0td>tr>01td>0td>0td>tr>0td>0td>std>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>

skew()

skew()這個CSS函數是一種用于拉伸，或者說是平移，該函數會使得在每個方向上扭曲元素上的每個點以一定角度。這是通過將每個坐標增加一個與指定角度成比例的值和到原點的距離來完成的。離原點越遠，拉伸的值就越大。

語法

skew(ax)skew(ax, ay)

參數

ax該參數為一個角度，表示用于沿著橫坐標扭曲元素的角度。ay該參數為一個角度，表示用于沿縱坐標扭曲元素的角度。Cartesian coordinates on ?2Homogeneous coordinates on ??2Cartesian coordinates on ?3Homogeneous coordinates on ??3

1tan(ax)td>tr>tan(ay)1td>tr>table> fenced> ath>	1tan(ax)td>0td>tr>tan(ay)1td>0td>tr>0td>0td>1td>tr>tr>table> fenced> ath>	1tan(ax)td>0td>tr>tan(ay)1td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	1tan(ax)td>0td>0td>tr>tan(ay)1td>0td>0td>tr>0td>0td>1td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>
[1 tan(ay)tan(ax)1 0 0]

skewX()

skewX()這個CSS函數是用于水平拉伸，它將元素的每個點在水平方向上扭曲一定角度。這是通過將橫坐標增加一個與指定角度成比例的值以及到原點的距離來完成的。離原點越遠，拉伸的值就越大。

語法

skewX(a)

參數

a該參數為一個角度，表示用于沿著橫坐標扭曲元素的角度。Cartesian coordinates on ?2Homogeneous coordinates on ??2Cartesian coordinates on ?3Homogeneous coordinates on ??3

1tan(ay)td>tr>01td>tr>table> fenced> ath>	1tan(ay)td>0td>tr>01td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	1tan(ay)td>0td>tr>01td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	1tan(ay)td>0td>0td>tr>01td>0td>0td>tr>0td>0td>1td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>
[1 0 tan(a)1 0 0]

skewY()

skewY()這個CSS函數是用于垂直拉伸，它將元素的每個點在垂直方向上扭曲一定角度。這是通過將縱坐標增加一個與指定角度成比例的值以及到原點的距離來完成的。離原點越遠，拉伸的值就越大。

語法

skewY(a)

參數

a該參數為一個角度，表示用于沿著縱坐標扭曲元素的角度。Cartesian coordinates on ?2Homogeneous coordinates on ??2Cartesian coordinates on ?3Homogeneous coordinates on ??3

10td>tr>tan(ax)1td>tr>table> fenced> ath>	10td>0td>tr>tan(ax)1td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	10td>0td>tr>tan(ax)1td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	10td>0td>0td>tr>tan(ax)1td>0td>0td>tr>0td>0td>1td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>
[1 tan(a)0 1 0 0]

translate()

translate()這個CSS 函數用于移動元素在平面上的位置。這種變換的特點是矢量的坐標定義了它在每個方向上的移動量。

語法

translate(tx)translate(tx, ty)

參數

tx該參數為，表示要移動矢量的橫坐標。ty該參數為，表示要移動矢量的縱坐標。如果不寫則默認為零，例如translate(2)表示translate(2, 0)。Cartesian coordinates on ?2Homogeneous coordinates on ??2Cartesian coordinates on ?3Homogeneous coordinates on ??3

平移不是?2中的線性變換，不能用笛卡爾坐標系中的矩陣表示。	10td>txtd>tr>01td>tytd>tr>0td>0td>1td>tr>table> fenced> ath>	10td>txtd>tr>01td>tytd>tr>0td>0td>1td>tr>table> fenced> ath>	10td>0td>txtd>tr>01td>0td>tytd>tr>0td>0td>1td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>
[1 0 0 1 tx ty]

translate3d()

translate3d()這個CSS 函數用于移動元素在3D空間中的位置。這種變換的特點是三維矢量的坐標定義了它在每個方向上的移動量。

語法

translate3d(tx, ty, tz)

參數

tx該參數為，代表移動矢量的橫坐標。ty該參數為，代表移動矢量的縱坐標。tz該參數為代表移動矢量的z軸坐標。該值不能使用百分比；如果使用會被認為是無效屬性。Cartesian coordinates on ?2Homogeneous coordinates on ??2Cartesian coordinates on ?3Homogeneous coordinates on ??3

這個變換是屬于 3D 空間的，并不適用于這兩種情況。	平移不是?3中的線性變換，不能用笛卡爾坐標系中的矩陣表示。	10td>0td>txtd>tr>01td>0td>tytd>tr>0td>0td>1td>tztd>tr>0td>0td>0td>1td>tr>table> fenced> ath>

translateX()

translateX()這個CSS 函數用于在平面上水平移動元素。這個轉換的特點是定義了它的水平移動量。

translateX(tx)是translate(tx, 0)的簡寫形式。

語法

translateX(t)

參數

t該參數為，代表移動矢量的橫坐標。Cartesian coordinates on ?2Homogeneous coordinates on ??2Cartesian coordinates on ?3Homogeneous coordinates on ??3

A translation is not a linear transform in ?2 and cannot be represented using a matrix in the cartesian coordinates system.	10td>ttd>tr>01td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	10td>ttd>tr>01td>0td>tr>0td>0td>1td>tr>table> fenced> ath>	10td>0td>ttd>tr>01td>0td>0td>tr>0td>0td>1td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>
[1 0 0 1 t 0]

translateY()

translateY()這個CSS 函數用于在平面上垂直移動元素。這個轉換的特點是通過定義了它的垂直移動量。

translateY(ty)是translate(0, ty)的簡寫形式。

語法

translateY(t)

參數

t該參數為代表移動矢量的橫坐標。該參數不能使用百分比；如果使用百分比形式，會被認為是無效參數。Cartesian coordinates on ?2Homogeneous coordinates on ??2Cartesian coordinates on ?3Homogeneous coordinates on ??3

A translation is not a linear transform in ?2 and cannot be represented using a matrix in the cartesian coordinates system.	10td>0td>tr>01td>ttd>tr>0td>0td>1td>tr>table> fenced> ath>	10td>0td>tr>01td>ttd>tr>0td>0td>1td>tr>table> fenced> ath>ath>	10td>0td>0td>tr>01td>0td>ttd>tr>0td>0td>1td>0td>tr>0td>0td>0td>1td>tr>table> fenced> ath>
[1 0 0 1 0 t]

translateZ()

translateZ()這個CSS 函數用于3D空間的z軸方向移動元素，這個轉換的特點是通過定義了它的z軸方向移動量。

translateZ(tz)是translate3d(0, 0, tz)的簡寫形式。

語法

translateZ(t)

參數

t該參數為，代表移動矢量的z軸坐標。Cartesian coordinates on ?2Homogeneous coordinates on ??2Cartesian coordinates on ?3Homogeneous coordinates on ??3

這個變換是屬于 3D 空間的，并不適用于這兩種情況。	A translation is not a linear transform in ?3 and cannot be represented using a matrix in the Cartesian coordinates system.	10td>0td>0td>tr>01td>0td>0td>tr>0td>0td>1td>ttd>tr>0td>0td>0td>1td>tr>table> fenced> ath>