當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

Transform 详细讲解

發布時間：2024/6/21 综合教程 31 生活家

生活随笔收集整理的這篇文章主要介紹了 Transform 详细讲解小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS3 2D Transform 詳細講解

#文章
CSS3
css3動畫

在一個二維或三維空間，元素可以被扭曲、移位或旋轉。只不過2D變形工作在X軸和Y軸，也就是大家常說的水平軸和垂直軸；而3D變形工作在X軸和Y 軸之外，還有一個Z軸。這些3D變換不僅可以定義元素的長度和寬度，還有深度。我們將首先討論元素在2D平面如何變換，然后我們在進入3D變換的討論。

CSS3 2D變換讓Web設計師有了更多的自由來裝飾和變形HTML組件。同時讓設計師有更多的功能裝飾文本和更多動畫選項來裝飾Div元素。在CSS3 2D變形中主要包含的一些基本功能如下。

相關標簽：CSS3動畫， CSS3

位移translate()函數

大家不要誤會了，translate并不是指翻譯外國語言，在這里translate是一種方法，將元素向指定的方向移動，類似于position中的relative。可以簡單的理解為，使用translate()函數，你可以把元素從原來的位置移動，而不影響在X、Y軸上任何組件。

translate()函數的使用語法如下：

translate(tx)

或者

translate(tx,ty)

translate()函數可以取一個值tx，也可以同時取兩個值tx和ty，其取值具體說明如下：

tx是一個代表X軸（橫坐標）移動的向量長度，當其值為正值時，元素向X軸右方向移動，反之其值為負值時，元素向X軸左方向移動。
ty是一個代表Y軸（縱向標）移動的向量長度，當其值為正值時，元素向Y軸下方向移動，反之其值為負值時，元素向Y軸上方向移動。如果ty沒有顯式設置時，相當于ty=0。

結合起來，translate()函數移動元素主要有以下三種移動：

水平移動：向右移動translate(tx,0)和向左移動translate(-tx,0)；
垂直移動：向上移動translate(0,-ty)和向下移動translate(0,ty);
對角移動：右下角移動translate(tx,ty)、右上角移動translate(tx,-ty)、左上角移動translate(-tx,-ty)和左下角移動translate(-tx,ty)。

現在我們來看一些有關于translate()函數的簡單例子。我們使用transform:translate(tx,ty)將一個對象從其原始位置移動，其中tx值為正值和ty值等于0時，對像向右移動：

HTML

CSS

div {
width: 500px;
height: 300px;
margin: 30px auto;
position: relative;
background: url(images/bg-grid.jpg) no-repeat center center;
background-size: 100% 100%;
}

//默認圖片都在容器中水平垂直居中
div img {
position: absolute;
top: 50%;
left: 50%;
margin-left: -35px;
margin-top: -50px;
}
div img:nth-child(1){
opacity: .5;
z-index: 1;
}
div img:nth-child(2){
opacity: 1;
z-index: 2;
transform: translate(100px,0);
}

效果如下圖所示：

在這個示例中，我們讓撲克牌梅花King相對于原點中心位置向右移動100像素。如果僅需讓元素向右移動，我們可以省略ty值。換句話說ty值為０時可以省略不寫。如此一來，上面的效果等同與：

div img:nth-child(2){
opacity: 1;
z-index: 2;
transform: translate(100px);
}

要將一個對象移動到左邊，我們只需要輸入一個負數的X軸坐標，而Y坐標應保持０，基于前面的實例，我們將撲克牌向左邊移動100像素：

div img:nth-child(2){
transform: translate(-100px,0);
}

效果如下圖所示：

垂直移動一個對象很簡單，幾乎和水平移動對象相同。唯一的區別是，我們將使用Y軸的值控制對象向上和向下移動位移量。正如我們前面提到的，Y軸的坐標值為正值時，對像向下移動；反之其坐標值為負值時，對象向上移動。而X軸的坐標值應該保持為０。我們來看一個簡單的實例，將一撲克牌向上，向下移動 100像素：

div img:nth-child(1){
opacity: .5;
z-index: 1;
}
div img:nth-child(2){
z-index: 2;
transform: translate(0,-100px);
}
div img:nth-child(3){
z-index: 3;
transform: translate(0,100px);
}

其效果如下圖所示：

要讓一個元素對角移動，我樣將結合X軸和Y軸兩坐標的值。根據不同的方向，X軸和Y軸的值可能是正值或是負值。如果我們要將一張撲克牌向右上角移動，需要將X軸坐標設置為正值，將Y軸從標設置為負值；如果要將一張撲克牌向右下角移動，需要將X、Y軸坐標設置為正值；如果要將一張撲克牌向左上角移動，需要將X、Y軸坐標設置為負值；如果要將撲克拍向左下角移動，需要將X坐標設置為負值，Y軸坐標設置為正值。

div img:nth-child(1){
opacity: .5;
z-index: 1;
}
div img:nth-child(2){
z-index: 2;
transform: translate(100px,-100px);
}
div img:nth-child(3){
z-index: 3;
transform: translate(100px,100px);
}
div img:nth-child(4){
z-index: 3;
transform: translate(-100px,-100px);
}
div img:nth-child(5){
z-index: 3;
transform: translate(-100px,100px);
}

其效果如下所示：

如果我們要將對象沿著一個方向移動，比如說沿著水平軸或者縱軸移動，可以實使用translate(tx,0)和translate(0,ty)來實現。其實在變形中還為單獨一個方向移動對象提供了更簡單的方法：

translateX()：水平方向移動一個對象。通過給定一個X軸方向的數值指定對象沿水平軸方向的位移。簡單點說，對像只向X軸進行移動，如果值為正值，對像向右移動；如果值為負值，對像向左移動。
translateY()：縱軸方向移動一個對象。通過給定一個Y軸方向的數值指定對象沿縱軸方向的位移。簡單點說，對象只向Y軸進行移動，如果值為正值，對象向下移動；如果值為負值，對像向上移動。

這兩個函數和前面介紹的translate()函數不同的是每個方法只接受一個值。所以，transform:translate(-100px,0)實際上等于transform:translateX(-100px);transform:translate(0,-100px)實際上等于transform:translateY(-100px)。

縮放scale()函數

縮放scale()函數讓元素根據中心原點對對象進行縮放。默認的值1。因此0.01到0.99之間的任何值，使一個元素縮小；而任何大于或等于1.01的值，讓元素顯得更大。

縮放scale()函數和translate()函數的語法非常相似，他可以接受一個值，也可以同時接受兩個值，如果只有一個值時，其第二個值默認與第一個值相等。例如，scale(1,1)元素不會有任何變化，而scale(2,2)讓元素沿X軸和Y軸放大兩倍。其使用語法如下：

scale(sx)

或者：

scale(sx,sy)

其取值簡單說明如下：

sx：用來指定橫向坐標（X軸）方向的縮放向量，如果值為0.01~0.99之間，會讓對象在X軸方向縮小，如果值大于或等于1.01，對象在Y軸方向放大。
sy：用來指定縱向坐標（Y軸）方向的縮放量，如果值為0.01~0.99之間，會讓對象在Y軸方向縮小，如果值大于或等于1.01，對象在Y軸方向放大。

這有一個簡單的實例：

HTML

CSS

div {
width: 500px;
height: 500px;
margin: 30px auto;
position: relative;
background: url(images/bg-grid.jpg) no-repeat center center;
background-size: 100% 100%;
}
div img {
position: absolute;
top: 50%;
left: 50%;
margin-left: -35px;
margin-top: -50px;
}
div img:nth-child(1){
opacity: .8;
z-index: 2;
border: 1px solid red;
}
div img:nth-child(2){
z-index: 1;
transform: scale(1.5);
}

效果如下所示：

上面的例子將撲克牌放大了1.5倍或是實際尺寸的150%。因為我們同時對X和Y軸方向方大，所以我們只需要給scale()聲明一個值。你也可以使用transform:scale(1.5,1.5)實現想相同的效果。

此外如果我們要縮小一個元素，我們會專門使用一個0~0.9999的值，像下面的例子，我們將撲克牌縮放一半，也就是實際尺寸的50%。

div img:nth-child(2){
z-index: ２;
transform: scale(.5);
}

效果如下所示：

但是，要小心，如果你將值設置為“0”時，元素將會消失。我想，如果沒必要，你是不會這樣做的。當我們僅給scale() 函數只顯式設置一個值時，會使對象成正比例放大或縮小。如果需要將對象在X軸和Y軸兩個方向設置不同的值。

div img:nth-child(2){
z-index: 2;
transform: scale(.5,1.2);
}

效果如下所示：

scale()函數和translate()函數極其相似，除了能通過scale()函數使用元素水平方向和垂直方向同時縮放（也就是元素沿X軸和Y軸同時縮放）之外，也可以使元素僅沿著X軸或Y軸方向縮放：

scaleX()：相當于scale(sx,1)。表示元素只在X軸（水平方向）縮放元素，其默認值是1。
scaleY()：相當于scale(1,sy)。表示元素只在Y軸（縱橫方向）縮放元素，其默認值是１。

通過上面的介紹，讓我們不由想起圖形編輯軟件中的縮放工具，對對象進行縮放效果。在CSS3中的scale()函數和圖形編輯軟件中的縮放工具幾乎相同：

在scale()函數中，取值除了可以取正值之外，同時還可以取負值。只不過取負值時，會先讓元素進行翻轉，然后在進行縮放。

HTML

<div class="wrapper">
<div>Scale(-1.5)</div>
</div>

CSS

.wrapper {
width: 500px;
height: 400px;
margin: 30px auto;
position: relative;
background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;
}
.wrapper > div {
position: absolute;
background-color: hsla(220,20%,20%,.3);
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
width: 198px;
height: 198px;
border: 1px dotted orange;
text-align: center;
line-height: 198px;
color: #fff;
font-size: 20px;
transform: scale(-1.5);
}

效果如下：

scale()函數對元素進行縮放時，都是以元素的中心為基點，但可以通過transform-origin來改變元素的基點。

旋轉rotate()函數

旋轉rotate()函數通過指定的角度參數對元素根據對象原點指定一個2D旋轉。它主要在二維空間內進行操作，接受一個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉。

rotate()函數的使用很簡單，其基本語法如下：

rotate(a);

rotate()函數只接受一個值，其屬性值簡單說明如下：

a：代表的是一個旋轉的角度值。其取值可以是正的，也可以是負的。如果取值為正值時，元素默認之下相對元素中心點順時針旋轉；如果取值為負值時，元素默認之下相對元素中心點逆時針旋轉。

接下來，我們來看一個簡單的例子，撲克牌相對于元素中心點順時針旋轉45度：

HTML

CSS

div {
width: 500px;
height: 300px;
margin: 30px auto;
position: relative;
background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;
}
div img {
position: absolute;
top: 50%;
left: 50%;
margin-left: -70px;
margin-top: -100px;
}
div img:nth-child(1){
z-index: １;
opacity: .6;
}
div img:nth-child(2){
z-index: 2;
transform: rotate(45deg);
}

效果如下所示：

在默認之下，rotate()函數旋轉元素是相對于元素中心點進行旋轉，同樣，我們可以通過transform-origin屬性重置元素的旋轉原點：

div img:nth-child(2){
z-index: 2;
transform-origin: top left;
transform: rotate(45deg);
}

基于上例，修改旋轉原點后的效果就完全不同了：

rotate()函數也同樣可以和圖形編輯軟件中的旋轉工具的功能對比起來理解。如下圖所示的是CSS3中rotate()函數在2D中的旋轉與Photoshop制作軟件中旋轉工具的對比：

傾斜skew()函數

傾斜skew()函數能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數的旋轉不同，rotate()函數只是旋轉，而不會改變元素的形狀。skew()函數不會旋轉，而只會改變元素的形狀。語法格式如下：

skew(ax)

或者

skew(ax,ay)

其屬性值說明如下：

ax：用來指定元素水平方向（X軸方向）傾斜的角度。
ay：用來指定元素垂直方向（Y軸方向）傾斜的角度。如果未顯式的設置這個值，其默認為０。

這里有一個簡單的例子：

div img:nth-child(1){
z-index: １;
opacity: .6;
}
div img:nth-child(2){
z-index: 2;
transform: skew(30deg,10deg);
}

效果如下圖所示：

傾斜skew()函數和CSS3中變形中的translate()、scale()函數一樣，除了可以使用skew(tx,ty)函數讓元素相于元素中心為原點在X軸和Y軸傾斜之外，還可以使用skewX()和skewY()函數讓元素只在水平或垂直方向傾斜。

skewX()：相當于skew(ax,0)和skew(ax)。按給定的角度沿X軸指定一個傾斜變形。skewX()使元素以其中心為基點，并在水平方向（X軸）進行傾斜變形。
skewY()：相當于skew(0,ay)。按給定的角度沿Y軸指定一個傾斜變形。skewY()用來設置元素以其中心為基點并給定的角度在垂直方向（Y軸）傾斜變形。

在默認情況之下，skew()函數都是以元素的原中心點對元素進行傾斜變形，但是我們同樣可以根據transform-origin屬性，重新設置元素基點對元素進行傾斜變形。另外，skew()函數和制圖軟件中的變形工具所起作用類似。

矩陣matrix()函數

CSS3中Transform讓我們操作變形變得很簡單，諸如，位移translate()函數、縮放scale()函數、旋轉rotate()函數和傾斜skew()函數。這幾個函數很簡單，也很方便，但是變形中的矩陣函數matrix()對于我們來說就不常使用了。

當然，Web設計師可以使用rotate()、skew()、scale()和translate()函數來滿足他們的變形需要，那我們為什么要勞煩矩陣matrix()呢？在CSS3中的變形函數都可以使用matrix()函數來代替，例如：

使用矩陣可以實現一個復雜的2D變形，如下：

#object {
transform-origin: 0 0;
transform: rotate(15deg) translateX(230px) scale(1.5, 2.6) skew(220deg, -150deg) translateX(230px)
}

使用一個矩陣matrix()規則變成如下：

#object {
transform-origin: 0 0;
transform: matrix(1.06, 1.84, 0.54, 2.8, 466px, 482px)
}

你也許很討厭matrix()函數中的一大堆數字，但是要整明白CSS3變形中的matrix()函數，我們先要了解矩陣matrix是怎么一回事。接下來我們一起探討一下transform中的matrix。

在CSS3中變形的matrix分為兩種，一種是2D矩陣，另外一種是3D矩陣。我們就先從簡單的入手——2D矩陣matrix。

CSS3中的2D矩陣matrix總共提供了六個參數:a,b,c,d,e和f，其基本寫法如下：

matrix(a,b,c,d,e,f)

實際上，這六個參數，對應的矩陣就是：

在開始之前，首先來復習下一個簡單的線性代數知識：矩陣與向量乘法。太復雜的我們用不到，我們只需要了解三維向量與3 x 3矩陣的乘積：

弄明白3x3的矩陣之后，即可知道matrix計算方法。x和y是元素初始原點的坐標，x’和y’則是通過矩陣變換后得到的新原點坐標。通過中間的那個3x3的變換矩陣，對原先的坐標施加變換，就能得到新的坐標了。依據矩陣變換規則即可得到：x’=ax+cy+e和y’=bx+dy+f：

上面的一大堆的字母讓你看了犯迷糊，為了讓人更好的理解，我們一起來看一個簡單的例子。假設矩陣參數如下：

transform: matrix(1,0,0,1,50,50);/*a=1,b=0,c=0,d=1,e=50,f=50*/

現在，我們根據這個矩陣偏移元素的中心點，假設是(0,0)，即x=0，y=0。

我們可以按照上面介紹的矩陣方式，將這個列成矩陣：

于是，變換后的原點位置x’和y’可以根據矩陣向量的計算規則計算出來：

也就是計算得出x’=50，y’=50。即元素的原點由(0,0)移動到(50,50)的位置。實際上transform:matrix(1,0,0,1,50,50);就等同時transform: translate(50px,50px)。

HTML

CSS

.matrix img:nth-child(2){
z-index: 2;
transform: matrix(1,0,0,1,50,50);
}
.translate img:nth-child(2){
z-index: 2;
transform: translate(50px,50px);
}

效果如下所示：

通過一些篇幅介紹了矩陣的一些基礎知識，并通過一個簡單的實例用matrix()函數實現translate()的位移效果。接下來我們分別看看CSS3變形中matrix()和各變形函數之間的關系。

translate()轉換成matrix()

首先來看最簡單的位移translate()函數。我們都知道transform:translate(tx,ty)的基本含義是將一個元素的顯示位置平移tx,ty。在矩陣變形中，translate的matrix的參數為：

matrix(1,0,0,1,tx,ty)/*tx,ty分別對應X和Y軸的增量*/

其對應的矩陣圖：

由此公式可知：transform:translate(100px,100px)；即對應著transform:matrix(1,0,0,1,100,100)；推算出的結果：x’=x+tx=x+100；y’=y+ty=y+100。

scale()轉換成matrix()

transform:scale(sx,sy)將一個元素按指定的倍數進行縮放，它對應的矩陣是：

matrix(sx*x,0,0,sy*y,0,0);/*sx和sy分別對應X軸和Y軸的縮放比率*/

其對應的矩陣圖：

由此公式可知：transform:scale(1.5,1.5);及對應著transform:matrix(1.5,0,01.5,0,0);推算出的結果：x’=x*sx=1.5*x；y’=y*sy=1.5*y。

rotate()轉換成matrix()

transform:rotate(a)將一個元素按指定的角度旋轉，它對應的矩陣是：

matrix(cos(a),sin(a),-sin(a),cos(a),0,0)；/*cos(a)和sin(a)是指旋轉度轉*/

由此公式可知：transform:rotate(45deg);及對應著transform:matrix(0.53,0.85,-0.85,0.53,0,0);[sin(45’)=0.85,cos(45’)=0.53]。推算出來的結果：x’=cos(a) x – sin(a)*y=cos(45)*x – sin(45)*y；y’=sin(a)*x + cos(a)*y = sin(45)*x + cos(45)*y。

skew()轉換成matrix()

transform:skew(ax,ay)將一個元素按指定的角度在X軸和Y軸傾斜，它對應的矩陣是：

matrix(1,tan(ay),tan(ax),1,0,0)/*tan(ax)和tan(ay)是對應的傾斜角度*/

其對應的矩陣圖：

由此公式可知：transform:skew(45deg)，對應著transform:matrix(1,0,1,1,0,0)，其中tan(45’)=1。推算出來的結果：x’=x + tan(a)*y；y’=tan(a)*x + y。

上面演示的是CSS3中常見的變形與矩陣的關系，除了上面演示的之外，還有其他的一些。下圖就是所有CSS3變換與矩陣等價的關系圖：

matrix()實現鏡像

在制圖軟件中變形工具除了旋轉、傾斜、位移、縮放等還有鏡向（水平鏡向、垂直鏡向）：

但鏡像對稱在CSS3變形中沒有相應的簡化操作。只能通過矩陣matrix()來實現。通過前面的內容介紹，我們清楚的知道，元素變形的原點是其中心點（在沒有顯式的重置之外），那么這個鏡向的原點也不例外。因為該軸永遠經過原點，因此，任意對稱軸都可以用y=k*x直線表示。則matrix表示就是：

matrix((1-k^2)/(1+k^2),2k / (1 + k^2),2k/(1+k^2),(k^2-1)/(1+k^2),0,0)

這個如何得到的呢？我們來看看實現的過程。如下圖所示，已經y=k*x，并且知道點(x,y)，求其對稱點（x’,y’）的坐標位置：

很簡單，一是垂直，二是中心點在軸線上，因此有：

(y-y') / (x - x') = -1/ k → ky-ky' = -x+x'
(x + x') / 2 * k = y + y' → kx+kx' = y+y'

很簡單的，把x’和y’提出來，就有：

x' = (1-k^2)/(k^2+1) *x + 2k/(k^2+1) *y;
y' = 2k/(k^2+1) *x + (k^2-1)/(k^2+1) *y;

再結合矩陣公式：

x' = ax+cy+e;
y' = bx+dy+f;

我們就可以得到：

a = (1-k^2)/(k^2+1);
b = 2k/(k^2+1);
c = 2k/(k^2+1);
d = (k^2-1)/(k^2+1);

也就是上面matrix矩陣中的參數值。

CSS3 2D Ttransform兼容性

CSS3的2D變形到目前為止在主流瀏覽器中得到較好的支持.CSS3的2D變換雖然得到眾多主流瀏覽器的支持，但在實際使用的時候需要添加瀏覽器各自的私有屬性：

IE9中使用2D變形時，需要添加-ms-私有屬性，在IE10+版本開始支持標準版本。
Firefox3.5至Firefox15.0版本需要添加-moz-的私有屬性，在Firefox16+版本開始支持標準版本。
Chrome4.0+開始支持2D變形，在實際使用的時候需要添加-webkit-私有屬性。
Safari3.1+開始支持2D變形，在實際使用的時候需要添加-webkit-私有屬性。
Opera10.5+開始支持2D變形，在實際使用的時候需要添加-o-私有屬性，但在Opera12.1版本不需要添加私有屬性，不過在Opera15.0+版本需要添加私有屬性-webkit-私有屬性。
移動設備iOS Safari3.2+、Android Browser2.1+、Blackberry Browser7.0+、Opera Mobile14.0+、Chrome for Android25.0+需要添加私有屬性-webkit-，而Opera Mobile11.0至Opera Mobile12.1和Firefox for Android19.0+不需要使用瀏覽器私有屬性。

via w3cplus

總結

以上是生活随笔為你收集整理的Transform 详细讲解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： HTML之marquee(文字滚动)详解
下一篇：怎么创建具有真实纹理的CG场景岩石？