共计 2200 个字符，预计需要花费 6 分钟才能阅读完成。
1 transform 属性
在 CSS3 中，能够利用 transform 性能实现文字或图像的旋转、缩放、歪斜、挪动这 4 中类型的变形解决。
（1）浏览器反对
到目前为止：Safari3.1 以上、Chrome8 以上、Firefox4 以上、Opera10 以上浏览器反对该属性。
2 旋转
应用 rotate 办法，在参数中退出角度值，角度值前面跟示意角度单位的“deg”文字即可，旋转方向为顺时针方向。
transform：rotate（45deg）；
3 缩放
应用 scale 办法来实现文字或图像的缩放解决，在参数中指定缩放倍率。
transform：scale（0.5）；// 放大一半
（1）能够别离指定元素的程度方向的放大倍率与垂直方向的放大倍率
transform：scale（0.5，2）；// 程度方向放大一半，垂直方向放大一倍。
4 歪斜
应用 skew 办法实现文字或图像的歪斜解决，在参数中别离指定程度方向上的歪斜角度与垂直方向上的歪斜角度。
transform：skew（30deg，30deg）；// 程度方向上歪斜 30 度，垂直方向上歪斜 30 度。
（1）只应用一个参数，省略另一个参数
这种状况下视为只在程度方向上进行歪斜，垂直方向上不歪斜。
transform：skew（30deg）；
5 挪动
应用 translate 办法来挪动文字或图像，在参数中别离指定程度方向上的挪动间隔与垂直方向上的挪动间隔。
transform：translate（50px，50px）；// 程度方向上挪动 50px，垂直方向上挪动 50px
（1）只应用一个参数，省略另一个参数
这种状况下视为只在程度方向上挪动，垂直方向上不挪动。
transform：translate（50px）；
6 对一个元素应用多种变形的办法
transform：translate（150px，200px）rotate（45deg）scale（1.5）；
7 指定变形的基准点
在应用 transform 办法进行文字或图像变形的时候，是以元素的中心点为基准点进行变形的。
transform-origin 属性
应用该属性，能够扭转变形的基准点。
transform：rotate（45deg）；
transform-origin：left bottom；// 把基准点批改为元素的左下角
（1）指定属性值
基准点在元素程度方向上的地位：left、center、right
基准点在元素垂直方向上的地位：top、center、bottom
8 3D 变形性能
（1）旋转
别离应用 rotateX 办法、rotateY 办法、rotateZ 办法使元素围绕 X 轴、Y 轴、Z 轴旋转，在参数中退出角度值，角度值前面跟示意角度单位的 deg 文字即可，旋转方向为顺时针旋转。
transform：rotateX（45deg）；
transform：rotateY（45deg）；
transform：rotateZ（45deg）；
transform：rotateX（45deg）rotateY（45deg）rotateZ（45deg）；
transform：scale（0.5）rotateY（45deg）rotateZ（45deg）；
（2）缩放
别离应用 scaleX 办法、scaleY 办法、scaleZ 办法使元素按 X 轴、Y 轴、Z 轴进行缩放，在参数中指定缩放倍率。
transform：scaleX（0.5）；
transform：scaleY（1）；
transform：scaleZ（2）；
transform：scaleX（0.5）scaleY（1）；
transform：scale（0.5）rotateY（45deg）；
（3）歪斜
别离应用 skewX 办法、skewY 办法使元素在 X 轴、Y 轴上进行顺时针方向歪斜（无 skewZ 办法），在参数中指定歪斜的角度
transform：skewX（45deg）；
transform：skewY（45deg）；
（4）挪动
别离应用 translateX 办法、translateY 办法、translateZ 办法、使元素在 X 轴、Y 轴、Z 轴方向上进行挪动，在参数中退出挪动间隔。
transform：translateX（50px）;
transform：translateY（50px）;
transform：translateZ（50px）;
9 变形矩阵
每种变形办法的背地都存在着一个对应的矩阵。
（1）计算 2D 变形（3 X 3 矩阵）
能够将这个 2D 变形矩阵书写为 matrim（a,b,c,d,e,f）,a~f 均代表一个数字，用于决定怎么执行变形解决。
（2）平移的 2D 矩阵
// 成果统一：右移 150px，下移 150px
transform：matrix（1，0,0,1，150，150）；
transform：translate（150px，150px）；
（3）计算 3D 变形
3D 缩放变形应用的 4X4 矩阵
transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
// 成果统一：X 轴方向上放大五分之一，Y 轴方向上放大一半。
transform:scale3d(0.8,0.5,1);
transform:matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1);
（4）可通过矩阵执行多重变形解决
将须要的变形矩阵相乘失去一个新的变形矩阵可实现该解决。
