CSS3 2D 轉(zhuǎn)換

CSS3 2D變換功能允許在2D空間中變換元素。

元素的2D轉(zhuǎn)換

使用CSS3 2D變換功能，您可以對(duì)二維空間中的元素執(zhí)行基本的變換操作，例如移動(dòng)，旋轉(zhuǎn)，縮放和傾斜。

變換后的元素不會(huì)影響周圍的元素，但可以像絕對(duì)定位的元素一樣將它們重疊。但是，變換后的元素在其默認(rèn)位置（未變換）仍會(huì)在布局中占用空間。

使用CSS變換和變換功能

CSS3 transform屬性使用變換功能來(lái)操縱元素使用的坐標(biāo)系，以便應(yīng)用變換效果。

以下部分描述了這些轉(zhuǎn)換函數(shù)：

translate()功能

沿X和Y軸將元素從當(dāng)前位置移動(dòng)到新位置?？梢詫?xiě)成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);      
}

translate(200px, 50px)該功能將圖像沿x軸正方向水平移動(dòng)200個(gè)像素，并沿y軸垂直方向移動(dòng)50個(gè)像素。

 

rotate()功能

rotate()函數(shù)將元素繞其原點(diǎn)（由transform-origin屬性指定）旋轉(zhuǎn)指定角度?？梢詫?xiě)成rotate(a)。

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

rotate(30deg)該功能將圖像繞其原點(diǎn)沿順時(shí)針?lè)较蛐D(zhuǎn)30度。您也可以使用負(fù)值來(lái)逆時(shí)針旋轉(zhuǎn)元素。

scale()功能

scale()功能增加或減小元素的大小?？梢詫?xiě)成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)函數(shù)按比例將圖像的寬度和高度縮放到其原始大小的1.5倍。 函數(shù)scale(1)或scale(1，1)對(duì)元素沒(méi)有影響。

 

skew()功能

skew()函數(shù)使元素沿X和Y軸傾斜指定的角度?？梢詫?xiě)成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 */    
}

該函數(shù)skew(-40deg, 15deg)使元素沿x軸水平傾斜-40度，并使y軸垂直傾斜15度。

 

matrix()功能

matrix()功能可以一次執(zhí)行所有2D轉(zhuǎn)換，例如平移，旋轉(zhuǎn)，縮放和傾斜。它采用矩陣形式的六個(gè)參數(shù)，可以寫(xiě)成matrix(a, b, c, d, e, f)。下一節(jié)將向您展示如何使用來(lái)表示每個(gè)2D變換函數(shù)matrix()。

• 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是度數(shù)。您可以交換sin(a)和-sin(a)值以反轉(zhuǎn)旋轉(zhuǎn)。您可以執(zhí)行的最大旋轉(zhuǎn)為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是以deg為單位的水平和垂直值。

這是使用matrix()功能執(zhí)行2D轉(zhuǎn)換的示例。

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);  
}

但是，一次執(zhí)行多個(gè)轉(zhuǎn)換時(shí)，使用單個(gè)轉(zhuǎn)換函數(shù)并按順序列出它們會(huì)更方便，如下所示：

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);      
}

2D轉(zhuǎn)換功能

下表簡(jiǎn)要概述了所有2D轉(zhuǎn)換功能。