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/。