变形

1、基本属性
transform:none|<transform-function><transform-function> *
例如：旋转180度，放大1.5倍，倾斜120度，移动10，矩阵变换
transform:rotate(180deg) scale(1.5) skew(120deg) matrix(1,0,0,1,50,50);
以上四个函数任选。

2、transform-origin属性

transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。
2D的变形中的transform-origin属性可以是一个参数值，也可以是两个参数值。如果是两个参数值时，第一值设置水平方向X轴的位置，第二个值是用来设置垂直方向Ｙ轴的位置。
3D的变形中的transform-origin属性还包括了Ｚ轴的第三个值。其各个值的取值简单说明如下：
x-offset：用来设置transform-origin水平方向Ｘ轴的偏移量，可以使用和值，同时也可以是正值（从中心点沿水平方向Ｘ轴向右偏移量），也可以是负值（从中心点沿水平方向Ｘ轴向左偏移量）。
offset-keyword：是top、right、bottom、left或center中的一个关键词，可以用来设置transform-origin的偏移量。
y-offset：用来设置transform-origin属性在垂直方向Ｙ轴的偏移量，可以使用和值，同时可以是正值（从中心点沿垂直方向Ｙ轴向下的偏移量），也可以是负值（从中心点沿垂直方向Ｙ轴向上的偏移量）。
x-offset-keyword：是left、right或center中的一个关键词，可以用来设置transform-origin属性值在水平Ｘ轴的偏移量。
y-offset-keyword：是top、bottom或center中的一个关键词，可以用来设置transform-origin属性值在垂直方向Ｙ轴的偏移量。
z-offset：用来设置3D变形中transform-origin远离用户眼睛视点的距离，默认值z=0，其取值可以，不过在这里将无效。
top = top center = center top = 50%0
right = right center = center right= 100%或(100% 50%)
bottom = bottom center = centerbottom = 50% 100%
left = left center = center left = 0或(0 50%)
center = center center = 50%或（50% 50%）默认：元素中心点
top left = left top = 0 0
right top = top right = 100% 0
bottom right = right bottom = 100%100%
bottom left = left bottom = 0 100%
3、transform-style属性
flat:默认值，2d

preserve-3d:3d

4、perspective属性
视距，针对3D变化，如果是2D，效果将平铺。用来设置用户和3D空间Z平面之间的距离，值越大离用户越近，视觉效果越明显，值越小离用户越远，视觉效果越弱，取值为0或无限大表示没有3D效果。属性值为none或绝对距离，不能是百分比。

5、perspective-origin属性
设置x轴和y轴的位置，好像观察者在该位置上观察元素一样。

6、backface-visibility属性
设置元素背面可见与否，visible：可见，hidden：不可见

7、2D变形
移位：translate(),translate(100px,0)= translate(100px)= translateX(100px),

translate(0,-100px)= translateY(-100px)

缩放：scale(sx)或scale(sx,sy)，sx：在x轴上的缩放量，小于1是缩小，等于1时不变，大于1时放大，sy同理

旋转：rotate(a),a为正值顺时针旋转，a为负值逆时针旋转

倾斜：skew(ax)或skew(ax,ay)，ax：指定元素水平倾斜的角度，ay：指定元素垂直倾斜的角度，单位是deg

矩阵：matrix()较复杂，不常用

3d在以上各个函数基础上加一个z轴