2012年9月，W3C组织发布了CSS3变形工作草案。CSS3变形允许CSS把元素转变为2D 或3D空间，这个草案包括了CSS3 2D变形和CSS3 3D变形。
CSS3变形是一些效果的集合，比如平移、旋转、缩放和倾斜效果，每个效果都被称作为变形函数（Transform Function）,它们可以操控元素发生旋转、缩放、和平移等变化。这些效果在之前都需要依赖图片、Flash或JavaScript才能完成。而使用纯CSS来完成这些变形则无需加载这些额外的文件，再一次提升了你的开发效率，还提高了页面的执行效率。
2D变换：
css3的transform属性指一组转换函数
css3的2D transform包括translate(x,y)位移、rotate(angle)旋转、scale(x,y)缩放、skew(x-angle,y-angle)倾斜和matrix()。从而改变元素的位置、形状和大小。
只要含有两个参数的都可以分开写，如下：
移动
translateX(n) 沿着 X 轴移动元素。
translateY(n) 沿着 Y 轴移动元素。
缩放
scaleX(n) 改变元素的宽度。
scaleY(n) 改变元素的高度。
倾斜
skewX(angle) 沿着 X 轴方向倾斜。
skewY(angle) 沿着 Y 轴方向倾斜。
属性：
transform-origin:更改元素的中心点。默认为transform-origin:50% 50%;
实例：
位移
12345678910111213141516171819 | html: <div class="box"> <div class="x"> </div></div> css: .box{ margin: 100px; width: 100px; height: 100px; border: 1px solid gray;}.x{ width: 100%; height: 100%; background: orange; transform:translate(50%，50%); } |
效果：
旋转：
transform-origin：为默认值（可以不写）
1234567891011121314151617181920 | html: <div class="box"> <div class="x"> </div></div> css: .box{ margin: 100px; width: 100px; height: 100px; border: 1px solid gray;}.x{ width: 100%; height: 100%; background: orange; transform:rotate(45deg); transform-origin:50% 50%;} |
效果：
transform-origin:0 0;以左上角0 0 为中中心点
1234567891011121314151617181920 | html: <div class="box"> <div class="x"> </div></div> css: .box{ margin: 100px; width: 100px; height: 100px; border: 1px solid gray;}.x{ width: 100%; height: 100%; background: orange; transform:rotate(45deg); transform-origin:0 0;} |
效果：
注意：rotate的角度为正数顺时针旋转，为负数逆时针旋转。
缩放
以0,0为中心点，x轴缩放0.5倍，y轴缩放2倍
1234567891011121314151617181920 | html: <div class="box"> <div class="x"> </div></div> css: .box{ margin: 100px; width: 100px; height: 100px; border: 1px solid gray;}.x{ width: 100%; height: 100%; background: orange; transform:scale(0.5,2); transform-origin:0 0;} |
效果：
扭曲
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 | html: <div class="box"> <div class="comm x"> </div></div><div class="box"> <div class="comm y"> </div></div><div class="box"> <div class="comm z"> </div></div><div class="box"> <div class="comm x1"> </div></div><div class="box"> <div class="comm y1"> </div></div> css: .box{ margin: 100px; width: 100px; height: 100px; border: 1px solid gray; float: left;}.comm{ width: 100%; height: 100%; background: orange; }.x{ transform:skew(30deg,0deg); transform-origin:50% 50%;}.y{ transform:skew(0deg,30deg); transform-origin:50% 50%;}.z{ transform:skew(30deg,30deg); transform-origin:50% 50%;}.x1{ transform:skew(30deg,0deg); transform-origin:0% 0%;}.y1{ transform:skew(-30deg,0deg); transform-origin:0% 0%;} |
效果：
注意：
skew(30deg,0deg)角度为正数时逆时针旋转，角度为负数时，顺时针旋转。