transform(變形)和transform-origin(變形原點)

轉載請說明出處，原文地址http://blog.sina.com.cn/s/blog_780a942701014xl8.html

 

 

transform(變形)和transform-origin(變形原點)

 

transform(變形)和transform-origin(變形原點)的說明：

      目前這兩個屬性獲得了除去ie之外各個主流瀏覽器webkit，firefox，opera的支持，屬性名分別爲

      -webkit-transform，-moz-transform，-o-transform;

一、改變元素基點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 。

  • 語法：-moz-transform-origin: [ |  | left | center | right ][ |  | top | center | bottom ] ?
  • transform-origin接受兩個參數，它們能夠是百分比，em，px等具體的值，也能夠是left,center,right，或者 top,center,bottom等描述性參數 ;
  • top left | left top 等價於 0 0；
  • top | top center | center top 等價於 50% 0
  • right top | top right 等價於 100% 0
  • left | left center | center left 等價於 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% 100%

  

其中 left,center right是水平方向取值，對應的百分值爲left=0%;center=50%;right=100%

而

top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;

若是只取一個值，表示垂直方向值不變。

注：

transform-origin並非transform中的屬性值，他具備本身的語法。

可是他要結合transform才能起做用。

 

例子：

 

初始態：

.heart{ position:relative; width:100px; height:80px; background:blue;}

.heart:before{ position:absolute; content:""; left:50px;top:0;width:50px;height:80px; background:red;border-radius: 50px 50px 0 0;}

取基點爲左下角，逆時針轉45deg

.heart{ position:relative; width:100px; height:80px; background:blue;}

.heart:before{ position:absolute; content:""; left:50px;top:0;width:50px;height:80px; background:red;border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -webkit-transform-origin: 0 100%;}

取右下角爲基點旋轉：

.heart{ position:relative; width:100px; height:80px; background:blue;}

.heart:before{ position:absolute; content:""; left:50px;top:0;width:50px;height:80px; background:red;border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -webkit-transform-origin: 0 100%;}

.heart:after{ position:absolute; content:""; left:0px;top:0;width:50px;height:80px; background:yellow;border-radius: 50px 50px 0 0; -webkit-transform: rotate(45deg); -webkit-transform-origin: 100% 100%;}

最後合併代碼並將黃色改成紅色統一：

.heart:before,.heart:after{ position:absolute; content:""; top:0;width:50px;height:80px; background:red;border-radius: 50px 50px 0 0;}

.heart:before{ left:50px; -webkit-transform: rotate(-45deg); -webkit-transform-origin: 0 100%;}
.heart:after { left: 0; -webkit-transform: rotate(45deg); -webkit-transform-origin: 100% 100%;}

 

二、transform

• transform屬性可用於內聯(inline)元素和塊級(block)元素。它容許咱們旋轉、縮放和移動元素，他有幾個屬性值參數：
• rotate(旋轉)容許你經過傳遞一個度數值來轉動一個對象；
• scale是一個縮放功能，可讓任一元素變的更大。它使用一個或者兩個正數和負數以及小數做爲參數；當使用一個參數時表示X軸和Y軸的縮放相同；
• translate就是基於X和Y 座標從新定位元素，當使用一個參數時表示X軸和Y軸的參數相同；
• skew傾斜（ps中的斜切），參數是度數，當使用一個參數時表示X軸和Y軸的參數相同；
• matrix矩陣變換，就是基於X和Y 座標從新定位元素，它使用6個參數