四、CSS3 Transform与坐标系统
transform-origin属性
transform-origin属性允许您更改转换元素的位置。
【语法】
transform-origin:x-axis y-axis z-axis;
五、CSS3 矩阵
矩阵的概念
矩阵可以理解为方阵，只不过，平时方阵里面站的是人，矩阵中是数值。而所谓矩阵的计算，就是两个方阵的人（可以想象成古代的方阵士兵）互相冲杀。
CSS3中的矩阵
CSS3中的矩阵指的是一个方法，书写为matrix()和matrix3d();
matrix是元素2D平面的移动变换（transform），2D变换矩阵为3*3；
matrix3d是元素3D的移动变换（transform），3D变换则是4*4的矩阵。
矩阵matrix
transform:matrix(a,c,b,d,tx,ty);
注意书写方向是竖直方向。
转换公式
x,y表示转换元素的所有坐标
此处,x,y即tranform-origin的值；如果没写，默认是0，0。即0,0,1
【备注】
单位矩阵是对角线为0,0,0
即：
1 0 0
0 1 0
0 0 1
目标矩阵说明
经计算得到的即目标矩阵，
其中ax+cy+e为变换后的水平坐标，bx+dy+f表示变换后的垂直位置。
案例：
计算经过：
【说明】
transform: matrix(1, 0, 0, 1, x, y)等同于transform: translate(x, y)
【注意】
matrix在FF浏览器下需要添加单位，webkit内核默认px，translate等方法需要加单位。
1).矩阵matrix缩放(scale)
matrix(sx, 0, 0, sy, 0, 0) ——scale(sx, sy)
【备注】
sx,sy分别代表：
2).矩阵matrix旋转(rotate)
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)——rotate(θdeg)。
3).矩阵matrix拉伸(skew)
matrix(1, tanθy, tanθx, 1, 0, 0) ——skew(θxdeg, θydeg)。
【备注】
矩阵很麻烦，但是有些效果只能用矩阵实现，比如下面这个例子
矩阵matrix镜像对称效果
【备注】
计算所需公式：
k'=(y'-y)/(x'-x)
k'*k=-1
【说明】
对称轴一定通过元素变换的中心点，k 是对称轴的斜率
3D变换中的矩阵
从二维到三维，是从4到9；而在矩阵里头是从3 * 3变成4 * 4 ,9到16了。
【例子】
transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
案例，transform:matrix3d(.5,0,0,0,0,.5,0,0,0,0,.5,0,0,0,0,1);等同于transform:scale3d(.5,.5,.5);
六、CSS3扩展属性
transform-style属性
该属性是指定嵌套元素是怎样在三维空间中呈现。
【语法】
transform-style:flat|preserve-3d;
【默认值】
transform-style:flat;
perspective属性
指定观察者与[z=0]平面的距离，使具有三维位置变换的元素产生透视效果。
【语法】
perspective:number|none
【默认值】
perspective:none;
perspective-origin属性
指定透视点的位置
【语法】
perspective-origin:x-axis y-axis;
【默认值】
perspective-origin:50% 50%;
backface-visibility属性
指定元素背面面向用户时是否可见。
【语法】
backface-visibility:visible|hidden;
【默认值】
backface-visibility:visible;
案例
backface-visibility
1
2
3
4
5
6
1
2
3
4
5
6