transform

如今開始正式學習CSS3，我所學習的知識來源於w3cplus，做者是大漠。我開始寫這個博客以前徵求了大漠的意見，問可否把w3cplus上學到的知識寫到我本身的博客上以加深印象，大漠很快的回覆了，說知識是用來分享的。大師風範，樂於分享。我也要認真踏實的學。

原文在這裏 http://www.w3cplus.com/content/css3-transform

 

CSS3製做動畫的幾個屬性：變形(transform)、轉換(transition)、動畫(animation).

此次學習第一個屬性——變形transform。

 

Transform字面上就是變形、改變的意思。在CSS3中transform主要包括如下5種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix.下面看css3中transform的旋轉rotate、扭曲skew、縮放scale和移動translate具體如何實現。

從transform的語法開始。

transform  :    none  |  <transform-function>  [ <transform-function> ]* 也就是： transform  :    rotate  |  scale  |  skew  |  translate  |  matrix;

 none;表示不進行變換；<transform-function>表示一個或者多個變換函數，以空格分開；換句話說就是咱們同時對一個元素進行transform的多種屬性操做，例如rotate、scale、translate三種，但這裏須要提醒的是，以往咱們疊加效果都是用（「，」）隔開，可是transform中使用多個屬性時卻須要有空格隔開。記住是空格隔開。

 

取值：

 

transform屬性實現了一些可用SVG實現的一樣的功能。它可用於內聯（inline）元素和塊級（block）元素。它容許咱們旋轉、縮放和移動元素，他有幾個屬性值參數：rotate;translate;scale;skew;matrix。下面咱們分別來介紹這幾個屬性值參數的具體使用方法：

 

1、旋轉rotate

 

rotate(<angle>):經過指定的角度參數對原元素指定一個2D rotation(2D旋轉)，需先有transform-origin屬性的定義。transform-origin定義的是旋轉的幾點，其中angle是指旋轉的角度，若是設置的值爲正數表示順時針旋轉，若是設置的值爲負數，則表示逆時針旋轉。如：transform:rotate(30deg):

 

 

2、移動translate

 

移動translate咱們分爲三種狀況：translate(x,y)水平方向和垂直方向同時移動(也就是X軸和Y軸同時移動);translateX(x)僅水平方向移動(X軸移動);translateY(y)僅垂直方向移動(Y軸移動)，具體使用方法以下:

 

1.translate(<translation-value>[,<translation-value>]):經過矢量[tx,ty]指定一個2D translation,tx是第一個過渡值參數,ty是第二個過渡值參數選項。若是未被提供,則ty以0做爲其值。也就是translate(x,y),它表示對象進行平移,按照設定的x,y參數值,當值爲負數時,反方向移動物體,其基點默認爲元素中心點,也能夠根據transform-orgin進行改變基點。如transform:translate(100px,20px):

 

 

二、translateX(<translation-value>):經過給定一個X方向上的數目指定一個translation。只向X軸進行移動元素,一樣其基點是元素中心點,也能夠根據transform-origin改變基點位置。如transform:translateX(100px):

 

 

三、translateY(<translation-value>):經過給定Y方向的數目指定一個translation。只向Y軸進行移動,基點在元素中心點,能夠經過transform-origin改變基點位置。如transform:translateY(20px):

 

 

 3、縮放scale

 

縮放scale和移動translate是極其類似,他也具備三種狀況:scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）;scaleX(x)元素僅水平方向縮放（X軸縮放）;scaleY(y)元素僅垂直方向縮放（Y軸縮放）,但它們具備相同的縮放中心點和基數,其中心點就是元素的中心位置,縮放基數爲1,若是其值大於1元素就放大,反之其值小於1,元素縮小。下面咱們具體來看看這三種狀況具體使用方法:

 

一、scale(<number>[,<number>]): 提供執行[sx,sy]縮放矢量的兩個參數指定一個2D scale（2D縮放）。若是第一個參數未提供,則取與第一個參數同樣的值。scale(x,y)是用於對元素進行縮放,可經過transform-origin對元素的基點進行設置,一樣基點在元素中心位置;其中X表示水平方向縮放的倍數,Y表示垂直方向縮放的倍數,而Y是一個可選參數,若是沒有設置Y值,則表示X,Y兩個方向的縮放倍數是同樣的。並以X爲準。如：transform:scale(2,1.5):

 

 

二、scaleX(<number>): 使用[sx,1]縮放矢量執行縮放操做,sx爲所需參數。scaleX表示元素只在X軸(水平方向)縮放元素,他的默認值是(1,1),其基點同樣是在元素的中心位置,咱們一樣是經過transform-origin來改變元素的基點。如:transform:scaleX(2):

 

 

三、scaleY(<number>): 使用[1,sy]縮放矢量執行縮放操做,sy爲所需參數。scaleY表示元素只在Y軸（垂直方向）縮放元素,其基點一樣是在元素中心位置,能夠經過transform-origin來改變元素的基點。如transfor:scaleY(2):

 

 

4、扭曲skew

 

扭曲skew和translate,scale同樣一樣具備三種狀況：skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按必定的角度值進行扭曲變形）;skewX(x)僅使元素在水平方向扭曲變形(X軸扭曲變形);skewY(y)僅使元素在垂直方向扭曲變形(Y軸扭曲變形),具體使用以下:

 

一、skew(<angle>[,<angle>]): X軸Y軸上的skew transformation(斜切變換)。第一個參數對應X軸,第二個參數對應Y軸。若是第二個參數未提供,則值爲0,也就是Y軸方向上無斜切。skew是用來對元素進行扭曲變形,第一個參數是水平方向上扭曲角度,第二個參數是垂直方向扭曲角度。其中第二個參數是可選參數,若是沒有設置第二個參數,那麼Y軸爲0deg。一樣是以元素中心爲基點,咱們也能夠經過transform-origin來改變元素的基點位置。如：transform:skew(30deg,10deg):

 

 

二、skewX(<angle>)：按給定的角度沿X軸指定一個skew transformation(斜切變換)。skewX是使元素以其中心點爲基點，並在水平方向(X軸)進行扭曲變形,一樣能夠經過transform-origin來改變元素的基點。如:transform:skewX(30deg):

 

 

三、skewY(<angle>)：按給定的角度沿Y軸指定一個skew transformation(斜切變換)。skewY是用來設置元素以其中心爲基點並按給定的角度在垂直方向(Y軸)扭曲變形。一樣咱們能夠經過transform-origin來改變元素的基點。如：transform:skewY(10deg):

 

 

5、矩陣matrix

 

matrix(<number>,<number>,<number>,<number>,<number>,<number>):以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換,至關於直接應用一個[a b c d e f]變換矩陣。就是基於水平方向(X軸)和垂直方向(Y軸)從新定位元素,此屬性值使用涉及到數學中的矩陣，在此只是簡單的說一下CSS3中的transform有這麼一個屬性值,若是有感興趣的能夠去了解更深層次的matrix使用方法,這裏就很少說了。

 

改變元素基點transform-origin

 

前面屢次提到transform-origin這個東東,他的主要做用就是讓咱們在進行transform動做以前能夠改變元素的基點位置,由於咱們元素默認基點就是其中心位置,換句話說咱們沒有使用transform-origin改變元素的基點位置的狀況下,transform進行的rotate,translate,scale,skew,matrix等操做都是以元素本身的中心位置進行變化的。但有時候咱們須要在不一樣的位置對元素進行這些操做,那麼咱們就可使用transform-origin來對元素進行基點改變,使元素基點不是在中心位置,以達到須要的基點位置。下面咱們主要來看看其使用規則：

 

transform-origin(x,y)：用來設置元素的運動的基點（參照點）。默認點是元素的中心點。其中X和Y的值能夠是百分值,em,px,其中X也能夠是字符參數值left,center,right;Y和X同樣除了百分值外還能夠設置字符值top,center,bottom,這個看上去有點像咱們background-position設置同樣;下面列出她們相對應的寫法：

 

一、top left | left top等價於0 0 | 0% 0%

 

二、top | top center | center top 等價於50% 0

 

三、right top | top right 等價於100% 0

 

四、left | left center | center left 等價於 0 50% | 0 50%

 

五、center | center center 等價於 50% 50%

 

六、right | right center | center right 登記於100% 50%

 

七、bottom left | left bottom 等價於0 100%

 

八、bottom | bottom center | center bottom等價於50% 100%

 

九、bottom right | right bottom 等價於100% 1005

 

其中left,center,right是水平方向取值,對應的百分值爲left=0%;center=50%;right=100%而top center bottom 是垂直方向的取值,其中top=0%;center=50%;bottom=100%;若是隻取一個值,表示垂直方向值不變,咱們分別看下面幾個實例

 

(1)transform-origin:(left,top):

 

 

(2)transform-origin:right

 

 

(3)transform-origin(255,75%)

 

 

更多的改變中心基點的辦法,你們能夠在本地多測試一下,多體會一下,這裏還要提醒你們一點的是,transform-origin並非transform中的屬性,他具備本身的語法,前面也說過了,說簡單一點就是相似於咱們的background-position的用法,但又有其不同,因咱們background-position不須要區別瀏覽器內核不一樣的寫法,但transform-origin跟其餘的CSS3屬性同樣,須要在不一樣的瀏覽器內核中加上相應的前綴,下面列出各類瀏覽器內核下的語法規則:

//mozilla內核瀏覽器 firefox3.5+ -moz-transform-origin:x y;    //webkit內核瀏覽器 safair and chrom -webkit-transform-origin:x y;    //Opera -o-transform-origin:x y;   //IE9 -ms-transform-origin:x y;   //W3C標準 transform-origin:x y;

 

 

transform在不一樣瀏覽器內核下的書寫規則

 

//mozilla內核瀏覽器 firefox3.5+ -moz-transform: rotate | scale | skew | translate;    //webkit內核瀏覽器 safair and chrom -webkit-transform: rotate | scale | skew | translate;    //Opera -o-transform: rotate | scale | skew | translate;   //IE9 -ms-transform: rotate | scale | skew | translate;   //W3C標準 transform: rotate | scale | skew | translate;

 

上面勒出的是不一樣瀏覽器內核transform的書寫規則,若是須要兼容各瀏覽器的話,以上寫法都須要調用。

 

支持transform的瀏覽器

 

 

一樣的transform在IE9下版本是沒法兼容的,」之因此有好多朋友說,IE用不了,搞這個作什麼?我的認爲,CSS3推出來了,他是一門相對前沿的技術,作爲web前段的開發者或者愛好者都有必要了解和掌握的一門新技術,若是要等到全部瀏覽器兼容,那咱們只能對CSS3說NO,我不用你。由於IE老大是跟不上了,,,,,,,純屬我的觀點,不表明任何。」（我一直也是被這個問題困擾，看了大漠這麼說了，釋然了，堅決了要學CSS3的決心。）仍是那句話,感興趣的朋友跟我同樣,不用例會IE,咱們繼續看下去。

 

在上面咱們詳細介紹了CSS3中的transform的各類屬性值的設置以及其各自的參數,下面咱們經過一個實例來看看每一種屬性值的使用,爲了節約空間和你們的時間,咱們後面的實例都是在這個html基礎上實現,主要是咱們在下面的菜單中的a:hover中分別使用不一樣的transform的設置,換句話說,當你移動到連接上時,相應的每個菜單項有不一樣的變化,由於咱們在每一個菜單中使用了transform。具體每個咱們能夠看下面的實例:

<!doctype html>css3 transform<style> body{ background:#0C1E27;color:#fff;} .menu ul{ border-top:15px solid #FFF; padding:0 10px;} .menu ul li{ float:left;} .menu ul li a{ color:#000; float:left; margin:0 5px; font-size:14px; height:50px; line-height:50px; text-align:center; width:65px; padding:10px 5px; background:#6FC; border-radius:0 0 5px 5px; box-shadow:0 0 1px #000,inset 0 0 2px #fff; text-shadow:0 0 1px #686868; text-decoration:none;} .menu ul li.translate a{ background:#2EC7D2;} .menu ul li.translate-x a{ background:#8FDD21;} .menu ul li.translate-y a{ background:#F45917;} .menu ul li.rotate a{ background:#D50E19;} .menu ul li.scale a{ background:#cdddf2;} .menu ul li.scale-x a{ background:#0fDD21;} .menu ul li.scale-y a{ background:#cd5917;} .menu ul li.skew a{ background:#519;} .menu ul li.skew-x a{ background:#D50;} .menu ul li.skew-y a{ background:#E19;} .menu ul li.matrix a{ background:#919;} .menu ul li.translate a:hover{ transform:translate(-10px,-10px);/*w3c標準*/ -webkit-transform:translate(-10px,-10px);/*Webkit內核瀏覽器：Safari and Chrome*/ -moz-transform:translate(-10px,-10px);/*mozilla內核瀏覽器:firefox3.5+*/ -o-transform:translate(-10px,-10px);/*opera*/ -ms-transform:translate(-10px,-10px);/*Ie9*/ } .menu ul li.translate-x a:hover{ transform:translateX(-10px); -webkit-transform:translateX(-10px); -moz-transform:translateX(-10px); -o-transform:translateX(-10px); -ms-transform:translateX(-10px); } .menu ul li.translate-y a:hover{ transform:translateY(-10px); -webkit-transform:translateY(-10px); -moz-transform:translateY(-10px); -o-transform:translateY(-10px); -ms-transform:translateY(-10px); } .menu ul li.rotate a:hover{ transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); } .menu ul li.scale a:hover{ transform:scale(0.8,0.8); -webkit-transform:scale(0.8,0.8); -moz-transform:scale(0.8,0.8); -o-transform:scale(0.8,0.8); -ms-transform:scale(0.8,0.8); } .menu ul li.scale-x a:hover{ transform:scaleX(0.8); -webkit-transform:scaleX(0.8); -moz-transform:scaleX(0.8); -o-transform:scaleX(0.8); -ms-transform:scaleX(0.8); } .menu ul li.scale-y a:hover{ transform:scaleY(0.8); -webkit-transform:scaleY(0.8); -moz-transform:scaleY(0.8); -o-transform:scaleY(0.8); -ms-transform:scaleY(0.8); } .menu ul li.skew a:hover{ transform:skew(45deg,15deg); -webkit-transform:skew(45deg,15deg); -moz-transform:skew(45deg,15deg); -o-transform:skew(45deg,15deg); -ms-transform:skew(45deg,15deg); } .menu ul li.skew-x a:hover{ transform:skewX(-30deg); -webkit-transform:skewX(-30deg); -moz-transform:skewX(-30deg); -o-transform:skewX(-30deg); -ms-transform:skewX(-30deg); } .menu ul li.skew-y a:hover{ transform:skewY(30deg); -webkit-transform:skewY(30deg); -moz-transform:skewY(30deg); -o-transform:skewY(30deg); -ms-transform:skewY(30deg); } .menu ul li.matrix a:hover{ transform:matrix(1,1,-1,0,0,0); -webkit-transform:matrix(1,1,-1,0,0,0); -moz-transform:matrix(1,1,-1,0,0,0); -o-transform:matrix(1,1,-1,0,0,0); -ms-transform:matrix(1,1,-1,0,0,0); } .menu ul li a{ transform-origin:0 0; -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -o-transform-origin:0 0; -ms-transform-origin:0 0; } </style><div class="menu"><ul class="clearfix"><li class="item translate"><a href="#" data-mce-href="#">Translate</a></li><li class="item translate-x"><a href="#" data-mce-href="#">TranslateX</a></li><li class="item translate-y"><a href="#" data-mce-href="#">TranslateY</a></li><li class="item rotate"><a href="#" data-mce-href="#">Rotate</a></li><li class="item scale"><a href="#" data-mce-href="#">Scale</a></li><li class="item scale-x"><a href="#" data-mce-href="#">ScaleX</a></li><li class="item scale-y"><a href="#" data-mce-href="#">ScaleY</a></li><li class="item skew"><a href="#" data-mce-href="#">Skew</a></li><li class="item skew-x"><a href="#" data-mce-href="#">SkewX</a></li><li class="item skew-y"><a href="#" data-mce-href="#">SkewY</a></li><li class="item matrix"><a href="#" data-mce-href="#">Matrix</a></li></ul></div>

 

最後來看一個transform運用多個屬性值的效果實例

<!doctype html>transform<style> body{ background:#002b36; color:#fff;} a{ background:#b57d23; color:black; display:block; width:100px; height:100px; text-decoration:none; text-align:center; } a:hover{ transform: translateX(50px) rotate(45deg) scale(0.8,1) skew(60deg,-30deg); -webkit-transform: translateX(50px) rotate(45deg) scale(0.8,1) skew(60deg,-30deg); -moz-transform: translateX(50px) rotate(45deg) scale(0.8,1) skew(60deg,-30deg); -o-transform: translateX(50px) rotate(45deg) scale(0.8,1) skew(60deg,-30deg); -ms-transform: translateX(50px) rotate(45deg) scale(0.8,1) skew(60deg,-30deg); } </style>一個transform運用多個效果的例子 <br /> <a href="#" data-mce-href="#">demo</a>

transform運用多個屬性值的時候，屬性之間不須要用逗號隔開，直接用空格。

至此大漠的這篇文章我理解完了。

每次都比別人努力一點點，何愁不比他人高出幾等。人年輕時，貴在堅持。