CSS3 Transform——transform-origin（轉）

在CSS2.1中，咱們的頁面都是靜態的，網頁設計師也習慣把它做爲頁面效果的設計工具。但每每有些頁面效果不僅是靜態的，好比說，如何實際移動一些元素？如何更改元素的外觀——旋轉或縮放？

多年來，Web設計師爲了給修改頁面的外觀，都依賴於圖片、Flash或JavaScript才能完成。不過，CSS3將要改變設計師這種思惟，進入CSS3時代，藉助CSS3就能夠輕鬆傾斜、縮放、移動以及翻轉元素。

在2011年05月在站上發表了第一篇有關於CSS3 Transform教程，現已時隔近兩年，有不少東西都有變化，並且理解也略有不一樣，接下來將會分幾篇教程，向你們介紹CSS3 Transform相關的知識。 

CSS3變形的介紹

2012年9月，W3C組織發佈了CSS3變形工做草案。CSS3變形容許CSS把元素轉變爲2D 或3D空間，這個草案包括了CSS3 2D變形和CSS3 3D變形。

CSS3變形是一些效果的集合，好比平移、旋轉、縮放和傾斜效果，每一個效果都被稱做爲變形函數（Transform Function）,它們能夠操控元素髮生旋轉、縮放、和平移等變化。這些效果在以前都須要依賴圖片、Flash或JavaScript才能完成。而使用純CSS來完成這些變形則無需加載這些額外的文件，再一次提高了你的開發效率，還提升了頁面的執行效率。

CSS變形容許您動態的控制元素。您能夠在屏幕周圍移動它們，縮小或擴大，旋轉，或結合全部這些產生複雜的動畫效果。經過CSS變形，可讓元素生成靜態視覺效果，但也能夠很容易結合CSS3的transition和動畫的keyframe產生一些動畫效果。在本章中，首先介紹簡單的2D變形，而後向您展現如何擴輾轉換成3D變形。

•  CSS3的transform屬性指一組轉換函數。
•  CSS3的2D transform函數包括了translate()、scale()、rotate()和skew()。
•  translate()函數接受CSS的標準度量單位；scale()函數接受一個0和1之間的十進制值；rotate()和skew()兩個函數都接受一個徑向的度量單位值deg。除了rotate()函數以外，每一個函數都接受X軸和Y軸的參數。
•  CSS3變形中具備X /Y可用的函數：translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()。
•  2D變形中還有一個矩陣matrix()函數，其包括六個參數。
•  CSS3 3D變形包括函數有：rotateX()、rotateY()、rotate3d()、translateZ()、translate3d()、scaleZ()和scale3d()。
•  CSS3 3D變形中也包括一個矩陣matrix3d()函數，其包括16個參數。
•  transform-origin屬性指定元素的中心點在哪。後面增長了第三個數transform-origin-z，控制元素三維空間中心點。
•  perspective屬性相對於觀衆產生一個3D場景，你看3D物體，眼睛到畫布的距離。正確的用法是他須要應用到變形元素的祖先元素上。
•  perspective-origin爲視點的位置。
•  backface-visibilty屬性用來設置背面的可見性。
•  設置transform-style的值爲preserve-3d值，創建一個3D渲染環境。

transform屬性

CSS3的變形（transform）屬性讓元素在一個座標系統中變形。這個屬性包含一系列變形函數，能夠移動、旋轉和縮放元素。transform屬性的基本語法以下：

transform：none | <transform-function> [<transform-function>]* 

transform屬性可用於內聯元素和塊元素。其默認值爲none，表示不元素不進行變形。transform另外一個屬性值是一系列的<transform-function>。<transform-function>表示一個或多個變形函數，以空格分開；換句話說就是咱們同時對一個元素進行變形的多種屬性操做，例如rotate、scale、translate等。但這裏須要提醒你們，以往咱們疊加效果都是用逗號(「，」)隔開，但在transform中使用多個transform-function時卻須要有空格隔開。

transform屬性3D變形（3D transform）模塊的一部分，也就是說全部的2D變形函數也包含於3D變形規範中。如此一來，CSS3變形中的函數根據不一樣的規範略有不一樣，下面列出的是變形中的2D和3D經常使用變形函數的功能，簡單說明以下：

2D transform經常使用的transform-function的功能:

•  translate()：用來移動元素，能夠根據X軸和Ｙ軸座標從新定位元素位置。在此基礎上有兩個擴展函數：translateX()和translateY()。
•  scale()：用來縮小或放大元素，可使用元素尺寸發生變化。在此基礎上有兩個擴展函數：scaleX()和scaleY()。
•  rotate()：用來旋轉元素。
•  skew()：用來讓元素傾斜。在此基礎上有兩個擴展函數：skewX()和skewY()。
•  matrix()：定義矩陣變形，基於X軸和Y軸座標從新定位元素位置。

3D transform經常使用的transform-function的功能:

•  translate3d()：移元素元素，用來指定一個3D變形移動位移量
•  translate()：指定3Ｄ位移在Ｚ軸的位移量。
•  scale3d()：用來縮放一個元素。
•  scaleZ():指定Z軸的縮放向量。
•  rotate3d()：指定元素具備一個三維旋轉的角度。
•  rotateX()、rotateY()和rotateZ()：讓元素具備一個旋轉角度。
•  perspective()：指定一個透視投影矩陣。
•  matrix3d()：定義矩陣變形。

transform-origin屬性

默認狀況，變形的原點在元素的中心點，或者是元素X軸和Y軸的50%處，以下圖所示：

咱們沒有使用transform-origin改變元素原點位置的狀況下，CSS變形進行的旋轉、移位、縮放等操做都是以元素本身中心（變形原點）位置進行變形的。但不少時候須要在不一樣的位置對元素進行變形操做，咱們就可使用transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到須要的原點位置。

若是咱們把元素變換原點（transform-origin）設置0（x） 0（y），這個時候元素的變換原點轉換到元素的左頂角處，以下圖所示：

正如上圖所示，改變transform-origin屬性的X軸和Ｙ軸的值就能夠重置元素變形原點位置，其基本語法以下所示:

transform-origin：[<percentage> | <length> | left | center | right | top | bottom] | [<percentage> | <length> | left | center | right] | [[<percentage> | <length> | left | center | right] && [<percentage> | <length> | top | center | bottom]] <length> ? 

上面的語法讓人看得發暈，其實能夠將語法拆分紅：

/*只設置一個值的語法*/ transform-origin: x-offset transform-origin:offset-keyword /*設置兩個值的語法*/ transform-origin：x-offset  y-offset transform-origin：y-offset  x-offset-keyword transform-origin：x-offset-keyword  y-offset transform-origin：x-offset-keyword  y-offset-keyword transform-origin：y-offset-keyword  x-offset-keyword /*設置三個值的語法*/ transform-origin：x-offset  y-offset  z-offset transform-origin：y-offset  x-offset-keyword  z-offset transform-origin：x-offset-keyword  y-offset  z-offset transform-origin：x-offset-keyword  y-offset-keyword  z-offset transform-origin：y-offset-keyword  x-offset-keyword  z-offset

transform-origin屬性值能夠是百分比、em、px等具體的值，也能夠是top、right、bottom、left和center這樣的關鍵詞。

2D的變形中的transform-origin屬性能夠是一個參數值，也能夠是兩個參數值。若是是兩個參數值時，第一值設置水平方向X軸的位置，第二個值是用來設置垂直方向Ｙ軸的位置。

3D的變形中的transform-origin屬性還包括了Ｚ軸的第三個值。其各個值的取值簡單說明以下：

•  x-offset：用來設置transform-origin水平方向Ｘ軸的偏移量，可使用<length>和<percentage>值，同時也能夠是正值（從中心點沿水平方向Ｘ軸向右偏移量），也能夠是負值（從中心點沿水平方向Ｘ軸向左偏移量）。
•  offset-keyword：是top、right、bottom、left或center中的一個關鍵詞，能夠用來設置transform-origin的偏移量。
•  y-offset：用來設置transform-origin屬性在垂直方向Ｙ軸的偏移量，可使用<length>和<percentage>值，同時能夠是正值（從中心點沿垂直方向Ｙ軸向下的偏移量），也能夠是負值（從中心點沿垂直方向Ｙ軸向上的偏移量）。
•  x-offset-keyword：是left、right或center中的一個關鍵詞，能夠用來設置transform-origin屬性值在水平Ｘ軸的偏移量。
•  y-offset-keyword：是top、bottom或center中的一個關鍵詞，能夠用來設置transform-origin屬性值在垂直方向Ｙ軸的偏移量。
•  z-offset：用來設置3D變形中transform-origin遠離用戶眼睛視點的距離，默認值z=0，其取值能夠<length>，不過<percentage>在這裏將無效。

看上去transform-origin取值與background-position取值相似。爲了方便記憶，能夠把關鍵詞和百分比值對比起來記：

•  top = top center = center top = 50% 0
•  right = right center = center right = 100%或(100% 50%)
•  bottom = bottom center = center bottom = 50% 100%
•  left = left center = center left = 0或(0 50%)
•  center = center center = 50%或（50% 50%）
•  top left = left top = 0 0
•  right top = top right = 100% 0
•  bottom right = right bottom = 100% 100%
•  bottom left = left bottom = 0 100%

爲了讓你們能一眼看明白，下面截圖以transform中的旋轉rotate()爲例，並transform-origin取值不同時的效果：

transform-origin取值爲center（或center center或50% 或50% 50%）：

transform-origin取值爲top（或top center或center top或50％ 0）：

transform-origin取值爲right(或right center 或center right 或 100％ 或 100％ 50％)：

transform-origin取值爲bottom(或bottom center 或center bottom 或 50％ 100％)：

transform-origin取值爲left(或left center或center left或0或0 50％):

transform-origin取值爲top left(或left top或0 0)：

transform-origin取值爲right top（或top right或100％ 0）：

transform-origin取值爲bottom right（或right bottom或100％ 100％）:

transform-origin取值爲left bottom（或bottom left 或 0 100％）:

CSS3變形中旋轉、縮放、傾斜均可以經過transform-origin屬性重置元素的原點，但其中的位移translate()始終以元素中心點進行位移。例以下面的兩段代碼的演示過程：

div { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); -moz-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); -o-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); -ms-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); }

接下來經過transform-origin將變形原點設置爲100% 100%:

div { -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); -moz-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); -o-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); -ms-transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); transform: translate(40px, 40px) translate(-50px, 35px) translateY(30px); }

雖然元素的變形原點經過transform-origin從50% 50%變成100% 100%，但元素位移translate()始終是依元素中心點進行位移，以下圖所示：

到目前爲止，transform-origin屬性在現代主流瀏覽器獲得很好的支持，但在一些瀏覽器之下依然須要添加各瀏覽器私有屬性，詳細狀況以下所示:

•  2D變形中transform-origin須要添加瀏覽器私有屬性版本：IE9+、Firefox3.5+、Chrome4+、Safari3.1+、Opera10.5+；iOS Safari3.2+、Android Browser2.1+、Blackberry Browser7.0+、Chrome for Android25.0+。
•  2D變形中transform-origin支持W3C標準規範的瀏覽器：IE10+、Firefox16+、Opera12.1+；Opera Mobile11.0+、Firefox for Android19.0。
•  3D變形中transform-origin須要添加瀏覽器私有屬性版本：IE10+、Firefox10+、Chrome12+、Safari4+、Opera15+、iOS Safari3.2+、Android Browser3.0+、Blackberry Browser7.0+、Opera Mobile14.0+、Chrome for Android25.0+。
•  3D變形中transform-origin支持W3C標準規範的瀏覽器:Firefox16+、Firefox for Android19+

經過transform-origin屬性改變元素的原點，能夠實現不一樣的變形效果，下面的示例中咱們分別演示了改變元素原點先後，CSS3變形各函數對圖像變形操做。

爲了能更具備對比性，下面的示例中有兩個div，每一個div各有5個img，而第一個div是指transform-origin爲默認值時效果，第二個div是指transform-origin修改後在不一樣transform函數中效果。

<div>     <img src="images/cardKingClub.png" alt="" width="142" height="200" />     <img src="images/cardKingClub.png" alt="" width="142" height="200" />     <img src="images/cardKingClub.png" alt="" width="142" height="200" />     <img src="images/cardKingClub.png" alt="" width="142" height="200" />     <img src="images/cardKingClub.png" alt="" width="142" height="200" /> </div> <div>     <img src="images/cardKingClub.png" alt="" width="142" height="200" />     <img src="images/cardKingClub.png" alt="" width="142" height="200" />     <img src="images/cardKingClub.png" alt="" width="142" height="200" />     <img src="images/cardKingClub.png" alt="" width="142" height="200" />     <img src="images/cardKingClub.png" alt="" width="142" height="200" /> </div>

默認樣式：

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: -71px; margin-top: -100px; }

注：爲了節省篇幅，代碼中省去了各瀏覽器前綴。

首先來看transform-origin屬性改變元素原點先後rotate()函數對圖像的旋轉效果：

div img:nth-child(1){ opacity: .5; z-index: 1; transform: rotate(10deg); } div img:nth-child(2){ opacity: .6; z-index: 2; transform: rotate(25deg); } div img:nth-child(3){ opacity: .7; z-index: 3; transform: rotate(35deg); } div img:nth-child(4){ opacity: .8; z-index: 4; transform: rotate(45deg); } div img:nth-child(5){ z-index: 5; transform: rotate(60deg); } div:nth-of-type(2) img { transform-origin: bottom; }

上面實例演示了變形中旋轉rotate()函數圍繞不一樣原點旋轉的效果，第一個容器div中的圖片圍繞圖片默認原點（中心）旋轉的過程；而第二個容器div中的圖片通過transform-origin屬性將圖片原點從中心點（center）修改成底部中心點（bottom）旋轉過程：

接下來，咱們在來看transform-origin修改原點先後，CSS3變形中傾斜skew()函數對圖片變形的過程：

div img:nth-child(1){ opacity: .5; z-index: 1; transform: skewX(10deg); } div img:nth-child(2){ opacity: .6; z-index: 2; transform: skewX(15deg); } div img:nth-child(3){ opacity: .7; z-index: 3; transform: skewX(20deg); } div img:nth-child(4){ opacity: .8; z-index: 4; transform: skewX(25deg); } div img:nth-child(5){ z-index: 5; transform: skewX(30deg); } div:nth-of-type(2) img { transform-origin: bottom; }

效果以下所示：

上面兩個例子簡單的演示了變形中的rotate()和skew()函數均可以經過transform-origin屬性改變對象原點，讓對象根據不一樣的原點進行變形。接來我繼續向你們演示變形中的縮放scale()函數在不一樣原點產生變形效果：

div img:nth-child(1){ opacity: .5; z-index: 1; transform: scale(1.2); } div img:nth-child(2){ opacity: .6; z-index: 2; transform: scale(1.1); } div img:nth-child(3){ opacity: .7; z-index: 3; transform: scale(.9); } div img:nth-child(4){ opacity: .8; z-index: 4; transform: scale(.8); } div img:nth-child(5){ z-index: 5; transform: scale(.6); } div:nth-of-type(2) img { transform-origin: right; }

效果以下所示：

上面三個簡單實例再次驗證了CSS3變形中的旋轉rotate()、縮放scale()和傾斜skew()函數均可以經過transform-origin屬性來改變元素對象的原點位置。可是transform-origin屬性改變元素對像原點位置，位移translate()函數始終會根據元素對像中心點進行位移。

前面演示的只是2D變形中transform-origin用來修改元素對象原點，以及對各類變形函數產生的不一樣效果。接下來，在來看一個簡單的實例，演示一下3D變形中transform-origin修改元素原點的3D旋轉效果。

div img { position: absolute; top: 50%; left: 50%; margin-left: -71px; margin-top: -100px; backface-visibility: visible; transform: perspective(500px); } div img:nth-child(1){ opacity: .5; z-index: 1; transform: rotate3d(1, 1, 1,10deg); } div img:nth-child(2){ opacity: .6; z-index: 2; transform: rotate3d(1, 1, 1,25deg); } div img:nth-child(3){ opacity: .7; z-index: 3; transform: rotate3d(1, 1, 1,35deg); } div img:nth-child(4){ opacity: .8; z-index: 4; transform: rotate3d(1, 1, 1,45deg); } div img:nth-child(5){ z-index: 5; transform: rotate3d(1, 1, 1,60deg); } div:nth-of-type(2) img { transform-origin: left bottom -50px; }

其效果以下所示：

下一篇

在這篇文章，回顧了CSS3的transform的基本知識，而後深刻介紹了transform-origin的相關知識。在接下來的文章中，咱們將一塊兒探討transform-style和perspective屬性的應用。你們和我一塊兒期待吧。

如需轉載，煩請註明出處：http://www.w3cplus.com/css3/transform-origin.html