CSS3转换

transform属性

• 概念
  让元素在一个坐标系统中变形，这个属性包含一系列变形函数，可以移动、旋转和缩放元素。
• 兼容性
  IE10+、FireFox16+、Chrome36+、Safari16+、Opera23+

2D转换

rotate属性值

• 概念
  通过指定的角度参数对原元素指定一个2D旋转。
• 语法
  transform：rotate（角度）；（正数表示顺时针旋转，负数表示逆时针旋转）

translate属性

• 概念
  根据X轴和Y轴位置给定的参数，从当前元素位置移动。
• 三种情况
  translateX（x）仅水平方向移动；
  translateY（y）仅垂直方向移动；
  translate（x,y）水平方向和垂直方向同时移动。

属性值	描述	语法
translateX（x）	通过给定一个X方向上的数目指定一个位移	transform：translateX（x）；
translateY（y）	通过给定一个X方向上的数目指定一个位移	transform：translateY（y）；
translate（x，y）	通过矢量[tx,ty]指定一个2D 移动，tx是第一个过渡值参数，ty是第二个过渡值参数	transform：translate（x，y）；

scale属性

• 概念
  指定元素的2D缩放。
• 三种情况
  scaleX（x）元素仅水平方向缩放；
  scaleY（y）元素仅垂直方向缩放；
  scale（x,y）使元素水平方向和垂直方向同时缩放。

属性值	描述	语法
scaleX（x）	使用[sx,1]缩放矢量执行缩放操作，sx为所需参数	transform：scaleX（x）
scaleY（y）	使用[sy,1]缩放矢量执行缩放操作，sy为所需参数	transform：scaleY（y）
scale（x,y）	提供执行[sx,sy]缩放矢量的两个参数指定一个2D缩放	transform：scale（x，y）

skew属性

• 概念
  指定元素斜切扭曲
• 三种情况
  skewX（angle）：仅使元素在水平方向扭曲变形；
  skewY（angle）：仅使元素在垂直方向扭曲变形；
  skew（angle,angle）使元素在水平和垂直方向同时扭曲。

属性值	描述	语法
skewX（angle）	按给定的角度沿X轴进行斜切变换	transform：skewX（angle）；
skewY（angle）	按给定的角度沿Y轴进行斜切变换	transform：skewY（angle）；
skew（angle,angle）	按给定的角度分别沿X轴和Y轴进行斜切变换，第一个值对应X轴，第二个值对应Y轴	transform：skew（angle，angle）；

3D转换

rotate（旋转）

属性值	描述	语法
rotateX	指定元素在X轴上的旋转角度	transform：rotateX（angle）；
rotateY	指定元素在Y轴上的旋转角度	transform：rotateY（angle）；
rotateZ	指定元素在Z轴上的旋转角度	transform：rotateZ（angle）；
rotate3d	指定元素的3D旋转角度	transform：rotate3d（x，y，z，angle）；（前三个参数代表方向，第四个参数代表旋转的角度，参数不允许省略）

translate（移动）

属性值	描述	语法
translateX	指定元素沿X轴平移	transform：translateX（x）；
translateY	指定元素沿Y轴平移	transform：translateY（y）；
translateZ	指定元素沿Z轴平移	transform：translateZ（z）；
translate3d	指定元素进行3D位移	transform：translate3d（x，y，z）；

transform-origin属性

• 概念
  允许更改转换元素的基准点。
• 属性值

属性值	描述
left	元素的最左边
top	元素的最上边
bottom	元素的最下边
right	元素的最右边
length、%	固定的长度或者元素的百分比位置，左上角为起点

• 语法
  transform-origin：x,y,z（3D转换需要添加，2D转换不需要添加）。

矩阵

CSS3中的矩阵
CSS3中的矩阵指的是一个方法，书写为matrix（）和matrix3d（）；matrix是元素2D平面的转换，2D转换矩阵为33；matrix3d是元素3D的转换，3D转换矩阵为44；

• 矩阵matrix
  transform：matrix（a，b，c，d，tx，ty，）；
  
  x、y表示转换元素各个点的坐标
• 目标矩阵说明
  ax+cy+e为变换后的水平坐标，bx+dy+f为变换后的垂直坐标。
• 注意
  matrix在Firefox浏览器下需要添加单位，webkit内核默认px，translate等方法需要加单位。
  常用的矩阵变换
• 矩阵matrix移动（translate）
  transform：matrix（1，0，0，1，x，y）等同于transform：translate（x，y）。
• 矩阵matrix缩放（scale）：
  transform：matrix（sx，0，0，sy，0，0）等同于transform：scale（sx，sy）。
• 矩阵matrix旋转（rotate）：
  transform：matrix（cosθ，sinθ，-sinθ，cosθ，0，0）等同于transform：rotate（0deg）。
• 矩阵matrix拉伸（skew）
  transform：matrix（1，tanθy，tanθx，1，0，0）等同于transform：skew（0xdeg，0ydeg）。

用矩阵matrix实现镜像对称效果

transform：matrix（（1-k*k）/ （1+k*k），2k/（1+k*k），2k/（1+k*k），（k*k-1）/（1+k*k），0，0）

K是对称轴的斜率。

• 矩阵matrix3d
  transform：matrix3d（sx，0，0，0，0，sy，0，0，0，0，sz，0，0，0，0，1）；

CSS3扩展属性

transform-style属性

• 概念
  指定嵌套元素是怎样在三维空间中呈现的。
• 语法
  transform-style：flat（默认值，不进行3D显示）|preserve-3d（将嵌套元素进行3D显示）；
  perspective属性
• 概念
  指定观察者与【z=0】平面的距离，使具有三维位置变换的元素产生透视效果。
• 语法
  perspective：number（数值越小，观察的距离越近） | none；

perspective-origin属性

• 概念
  指定透视点的位置，可以让观察者从不同的角度观察元素。
• 语法
  perspective-origin：x，y；默认值都为50%。

backface-visibility属性

• 概念
  指定元素背面面向用户时是否可见。
• 语法
  backface-visibility：visible（默认值）| hidden；