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

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

transform: rotate(30deg);

这里只表示在二维中顺时针旋转30度。

缩放(Scale):

transform: scale(value, [value]);

前面一个值代表X轴，后面一个代表Y轴。如果只有一个值，那么Y轴等于X轴值。

珊瑚色汽车人，旋转30degree，变大两倍。

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

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

值少于1就是缩小，大于1就是放大。

歪斜(skew):

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

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

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

秒客网