CSS3 變形（CSS3 Transforms）——基本變形

汽車人！變形！出發！——<變形金剛>

---

 

<變形金剛>我想每一個人均可能看過吧。在CSS中，也有一個屬性可以操縱元素視覺變形，從而改變元素的外觀。它能使元素在二維和三維空間中變形,是transform,而不是transformer.

transform屬性能接受一組變形屬性，或設置爲none(默認值)。

 

transform: none | <transform-list>;

 

transform屬性能接受一組變形值，用空格分隔。transform是CSS3中新增長的模塊，爲了照顧那些老瀏覽器，咱們有必要爲transform屬性加上前綴：

  -webkit-transform: value;
  -moz-transform:    value;
  -ms-transform:     value;
  -o-transform:      value;
  transform:         value;

CSS變形沒有像變形金剛那麼大的變形能力，可是它的變形能力若是用得恰當，能顯著增長頁面的效果。

旋轉(Rotate)：

---

 

transform: rotate(angle);

 

旋轉老是順時針(clockwise)方向旋轉，汽車人，旋轉30度。

transform: rotate(30deg);

這裏只表示在二維中順時針旋轉30度。

縮放(Scale):

---

 

transform: scale(value, [value]);

 

前面一個值表明X軸，後面一個表明Y軸。若是隻有一個值，那麼Y軸等於X軸值。

珊瑚色汽車人，旋轉30degree，變大兩倍。

 

transform: rotate(30deg) scale(2);

值少於1就是縮小，大於1就是放大。

歪斜(skew):

---

 

transform: skewX(value);  /* e.g. skewX(45deg) */
transform: skewY(value);

 

移動（translate）

---

 

transform: translate(value [, value]);

 

translate的值表示當前元素相對於原位置移動多少，第一個值指定X軸值，第二個指定Y軸值。若是隻有一個值，則Y軸和X軸值相等，值得注意的是座標原點在左上角。

 

transform: translate(-50%,-50%);

這裏表示基於元素寬度和高度分別向X軸和Y軸移動寬和高的50%。

總結：這裏只有transform2D的部分屬性，transform還有3D變形和更多更復雜的屬性。可是它們的實現都是經過矩陣。2D變形主要包括了移動，歪斜，旋轉，縮放。

參考：http://css-tricks.com/almanac/properties/t/transform/和http://dev.w3.org/csswg/css-transforms/。