前面的话

 　　CSS 变形 transform 是一些效果的集合，主要是移动、旋转、缩放和倾斜这四种基本操作，还可以通过设置 matrix 矩阵来实现更复杂的效果。变形 transform 可以实现 2D 和 3D 两种效果。2D 变形涉及的属性主要有 transform 变形函数和 transform-origin 变形原点。本文将详细介绍变形 transform2d 的相关知识。为了更清楚地说明变形的整个过程，本文的 DEMO 中大量使用了 CSS 过渡 transition。关于 CSS 过渡 transition 的详细情况移步至此

变形原点 (2 维)

　　变形原点 transform-origin 是指变形操作所依据的基点。默认情况下，变形原点位于元素的中心点

transform-origin

　　值: x 轴 y 轴 z 轴

　　初始值: 50% 50%

　　应用于: 非 inline 元素 (包括 block、inline-block、table、table-cell 等)

　　继承性: 无

　　[注意]IE9- 浏览器不支持，safari3.1-8、android2.1-4.4.4、IOS3.2-8.4 都需要添加前缀，其他更高版本浏览器可使用标准写法

　　2 维的变形原点 transform-origin 是由 x 轴和 y 轴两个轴的值共同确定的 (不考虑 3 维的情况，z 轴的值默认为 0)

x 轴: left | center | right | <length> | <percentage>
y 轴: top | center | bottom | <length> | <percentage>

【1】关键字

x 轴
left: 0%  center: 50%  right: 100%
y 轴
top: 0%  center: 50%  bottom: 100%

【2】数值

　　x 轴数值表示在 x 轴上离 0 点 (元素边框外侧左上角) 的偏移量；y 轴数值表示在 y 轴上离 0 点的偏移量

// 以 rotate()旋转函数来说明变形原点。rotate(90deg) 表示元素沿顺时针旋转 90 角度

【3】百分比

　　其中 x 轴的百分比相对于元素的宽度和 (width+ 横向 padding+ 横向 border)，即包含块的宽度；而 y 轴的百分比相对于元素的高度和 (height+ 纵向 padding+ 纵向 border)，即包含块的高度

// 以 rotate()旋转函数来说明变形原点。rotate(90deg) 表示元素沿顺时针旋转 90 角度

【4】单个值

　　当只有一个值时，默认第二个值为 center

// 以 rotate()旋转函数来说明变形原点。rotate(90deg) 表示元素沿顺时针旋转 90 角度

变形函数 (2 维)

　　变形 transform 是一系列变形函数的集合

transform

　　值: none | <transform-function>+

　　初始值: none

　　应用于: 非 inline 元素 (包括 block、inline-block、table、table-cell 等)

　　继承性: 无

<transform-function>: translate | scale | rotate | skew | matrix

　　[注意]transform 中出现多个变形函数时用空格分隔

　　[注意] 位移、缩放、旋转和倾斜这四个操作中除了位移与变形原点无关，其余三个都与变形原点有关

矩阵 matrix

　　实际上，位移、缩放、旋转和倾斜这四个操作都是通过矩阵 matrix 实现的

　　matrix(a,b,c,d,e,f) 函数有 a,b,c,d,e,f 这 6 个参数。而 x 和 y 是变形前元素的任意点。通过以下矩阵变换，生成对应的新坐标 x'和 y'。

x' = ax + cy + e;
y' = bx + dy + f;

　　由此可得到默认 a、d 为 1，b、c、e、f 为 0。a 和 d 控制缩放，且不可为 0；c 和 b 控制倾斜；而 e 和 f 控制位移

　　[注意]matrix() 方法的最后两个参数，对于 chrome 浏览器来说，默认是 px 单位，可以不写单位。但是，在 firefox 浏览器下，需要添加单位

镜像对称

　　对称轴一定通过元素变换的中心点，k 是对称轴的斜率

matrix((1-k*k)/(1+k*k),2k/(1+k*k),2k/(1+k*k),(k*k-1)/(1+k*k),0,0)

位移

　　translate 位移函数可以使元素从原来的位置上移动指定的位移。涉及位移的 2d 函数共 3 种，分别是 translate()、translateX()、translateY()

　　[注意] 元素发生位移后，元素的 x 轴和 y 轴跟着也一并移动，若元素再进行其他的变形操作，则要沿着改变后的 x 轴和 y 轴进行变形

translate(x[,y]?)

　　x 表示元素在 x 轴方向上的位移；y 表示元素在 y 轴方向上的位移

　　[注意] 当 y 不存在时，相当于 y=0

translateX(x) 相当于 translate(x,0)

　　x 表示元素在 x 轴方向上的位移

translateY(y) 相当于 translate(0,y)

　　y 表示元素在 y 轴方向上的位移

　　[注意] 位移函数相当于 matrix(1,0,0,1,x,y)

　　位移函数还可以接受百分比。其中 x% 相对于元素水平方向的宽度和，y% 相对于元素垂直方向的高度和

　　[注意]IE10 浏览器有 bug，元素的位移函数的百分比是相对于元素的可视宽高 (不包括边框) 而言的

//元素的主要样式为 width:100px;height:100px;padding:10px;border:10px solid black;

缩放

　　scale 缩放函数可以让元素根据变形原点进行缩放，默认缩放值为 1。涉及缩放的 2d 函数共 3 种，分别是 scale()、scaleX()、scaleY()

　　[注意] 当元素被缩放后，若元素要进行位移，数值类型的位移值要乘以该缩放比例；百分比类型的位移值乘以原来的宽度和或高度和转换成数值类型后，再乘以缩放比例

scale(x,[,y]?)

　　x 表示元素在 x 轴方向上的缩放比例；y 表示元素在 y 轴方向上的缩放比例

　　[注意] 当 y 不存在时，相当于 y=x

　　[注意] 当 x 或 y 的值为负值时，元素先翻转再缩放

scaleX(x) 相当于 scale(x,1)

　　x 表示元素在 x 轴方向上的缩放比例

scaleY(y) 相当于 scale(1,y)

　　y 表示元素在 y 轴方向上的缩放比例

　　[注意] 缩放函数相当于 matrix(x,0,0,y,0,0)

倾斜

　　skew 倾斜函数可以让元素以其变形原点围绕 x 轴和 y 轴进行一定角度的倾斜。涉及倾斜的 2d 函数共 3 种，分别是 skew()、skewX()、skewY()

　　[注意] 元素倾斜后，x 轴和 y 轴发生倾斜，若元素要进行其他变形操作，则沿着倾斜后的 x 轴和 y 轴进行变形

skew(xdeg,[,ydeg]?)

　　x 表示 y 轴向 x 轴倾斜的角度，y 表示 x 轴向 y 轴倾斜的角度

　　[注意] 当 y 不存在时，相当于 y=0

　　[注意]x>0 时，表示 y 轴向 x 轴正方向倾斜；x<0 时，表示 y 轴向 x 轴负方向倾斜

　　[注意]y>0 时，表示 x 轴向 y 轴正方向倾斜；y<0 时，表示 x 轴向 y 轴负方向倾斜

skewX(x) 相当于 skew(x,0)

　　x 表示 y 轴向 x 轴倾斜的角度

skewY(y) 相当于 skew(0,y)

　　y 表示 x 轴向 y 轴倾斜的角度

　　[注意] 倾斜函数相当于 matrix(1,tany,tanx,1,0,0)

旋转

　　rotate 旋转函数可以让元素通过指定的角度 (deg) 根据变形原点进行顺时针旋转，默认为 0deg。与 skew 不同的是，rotate 不会改变元素的形状。涉及到旋转的 2d 函数只有一个，就是 rotate()

　　[注意] 元素旋转后，元素的 x 轴和 y 轴也跟着发生旋转。若元素要进行其他变形操作，则沿着旋转后的 x 轴和 y 轴进行变形

rotate(Ndeg)

　　[注意] 当 N 为正数时，元素进行顺时针旋转；当 N 为负数时，元素进行逆时针旋转

　　[注意] 旋转函数相当于 matrix(cosN,sinN,-sinN,cosN,0,0)

多值

　　transform 变形可以接受多值，出现多个变形函数时用空格分隔，并且按照从前往后的顺序执行。

transform: <transform-function1> <transform-function2> <transform-function3>...

【1】多个变形函数的先后关系可以转换为多个元素的嵌套关系

<div style="transform:rotate(45deg) translateX(100px)"></div>
相当于
<div style="transform:rotate(45deg)">
  <div style="transform:translateX(100px)"></div>
</div>

.box{
  width: 100px;
} 
.in{
  background-color: pink;
  height: 100px;
}
.out{
  background-color: lightblue;
  height: 100px;
}

<div class="box">
    <div class="out" style="-webkit-transform:rotate(45deg) translateX(100px);transform:rotate(45deg) translateX(100px);"></div>
    <div style="-webkit-transform:rotate(45deg);transform:rotate(45deg)">
      <div class="in" style="-webkit-transform:translateX(100px);transform:translateX(100px)"></div>
    </div>    
</div>

【2】变形 transform 中的多个变形函数的执行顺序是从前向后依次执行

//第一种情况: 旋转 45deg 后，元素的 x 轴正向变成右下 45deg，所以元素接下来的位移向这个方向移动
//第二种情况: 元素向右移动 100px 后，元素的原点跟着元素一起平移，并一直在元素的中心位置，所以元素接下来的旋转是原地旋转