IT行業(yè)近十年來(lái)發(fā)展迅猛，衍生出許多新的職業(yè)，如UI設(shè)計(jì)師、開(kāi)發(fā)工程師、軟件測(cè)試工程師等，在眾多新興職業(yè)中，Web前端工程師就是其中之一。在IT行業(yè)，Web前端真正得到重視大概也要六七年。伴隨著因特網(wǎng)的迅速發(fā)展，各種因特網(wǎng)項(xiàng)目不斷涌現(xiàn)，對(duì)用戶體驗(yàn)的要求也越來(lái)越高，前端開(kāi)發(fā)逐漸成為互聯(lián)網(wǎng)研發(fā)的重要角色。

    CSS32D轉(zhuǎn)換

    CSS3轉(zhuǎn)換

    CSS3轉(zhuǎn)換可以對(duì)元素進(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或拉伸。

    瀏覽器支持

    表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

    緊跟在-webkit-,-ms-或-moz-前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號(hào)。

    nternetExplorer10,Firefox,和Opera支持transform屬性.

    Chrome和Safari要求前綴-webkit-版本.

    注意：InternetExplorer9要求前綴-ms-版本.

    2D轉(zhuǎn)換

    在本章您將了解2D變換方法：

    translate()

    rotate()

    scale()

    skew()

    matrix()

div{transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */}

    translate()方法

    translate()方法，根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動(dòng)。

div{transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */-webkit-transform: translate(50px,100px); /* Safari and Chrome */}

    translate值（50px，100px）是從左邊元素移動(dòng)50個(gè)像素，并從頂部移動(dòng)100像素。

    rotate()方法

    rotate()方法，在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)的元素。負(fù)值是允許的，這樣是元素逆時(shí)針旋轉(zhuǎn)。

div{transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */}

    rotate值（30deg）元素順時(shí)針旋轉(zhuǎn)30度。

    scale()方法

    scale()方法，該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數(shù)：

-ms-transform:scale(2,3); /* IE 9 */-webkit-transform: scale(2,3); /* Safari */transform: scale(2,3); /* 標(biāo)準(zhǔn)語(yǔ)法 */

    scale（2,3）轉(zhuǎn)變寬度為原來(lái)的大小的2倍，和其原始大小3倍的高度。

    skew()方法

    語(yǔ)法

transform:skew(<angle> [,<angle>]);

    包含兩個(gè)參數(shù)值，分別表示X軸和Y軸傾斜的角度，如果第二個(gè)參數(shù)為空，則默認(rèn)為0，參數(shù)為負(fù)表示向相反方向傾斜。

    skewX();表示只在X軸(水平方向)傾斜。

    skewY();表示只在Y軸(垂直方向)傾斜。

div{transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */}

    skew(30deg,20deg)元素在X軸和Y軸上傾斜20度30度。

    matrix()方法

    matrix()方法和2D變換方法合并成一個(gè)。

    matrix方法有六個(gè)參數(shù)，包含旋轉(zhuǎn)，縮放，移動(dòng)（平移）和傾斜功能。

    利用matrix()方法旋轉(zhuǎn)div元素30°

div{transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */}

    前端學(xué)習(xí)永遠(yuǎn)不會(huì)是單槍匹馬，需要前人的引領(lǐng)，也需要平臺(tái)的不斷交流與思想碰撞。這能夠快速入門，減少走彎路，還能讓自己找到問(wèn)題的根源。