CSS变形transform（2d）
前⾯的话
CSS变形transform是⼀些效果的集合，主要是移动、旋转、缩放和倾斜这四种基本操作，还可以通过设置matrix矩阵来实现更复杂的效果。变形transform可以实现2D和3D两种效果。2D变形涉及的属性主要有transform变形函数和transform-origin变形原点。本⽂将详细介绍变形transform2d的相关知识。为了更清楚地说明变形的整个过程，本⽂的DEMO中⼤量使⽤了CSS过渡transition。
neoline变形原点(2维)
curity是什么意思 变形原点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>
valvesoftware【1】关键字
x轴
left: 0% center: 50% right: 100%
y轴
top: 0% center: 50% bottom: 100%
//以rotate()旋转函数来说明变形原点。rotate(90deg)表⽰元素沿顺时针旋转90⾓度
【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 | matrixjulianne hough
[注意]transform中出现多个变形函数时⽤空格分隔
[注意]位移、缩放、旋转和倾斜这四个操作中除了位移与变形原点⽆关，其余三个都与变形原点有关
oral矩阵matrix
实际上，位移、缩放、旋转和倾斜这四个操作都是通过矩阵matrix实现的
matrix(a,b,c,d,e,f)函数有a,b,c,d,e,f这6个参数。⽽x和y是变形前元素的任意点。通过以下矩阵变换，⽣成对应的新坐标x'和y'。
x' = ax + cy + e;
no doubty' = 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
brandoff [注意]当x或y的值为负值时，元素先翻转再缩放
byodscaleX(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)
