【css3】变形

属性

1. transform-origin : 控制元素三维空间中心点
2. transform-style ： 有两个属性值 flat 和 preserve-3d，设置为preserve-3d建立一个3D渲染环境
3. transfrom-function：
   2D
   translate( ) 从新定位 两个扩展函数translateX（），translateY（）
   scale（）放大缩小元素 扩展scale X（），scaleY（）
   rorate（）旋转元素
   skew（）倾斜元素 扩展skewX（），skewY（）
   matrix（）矩阵变形
   3D（写的时候最好写3D,会开启手机的GPU加速器）
   translate3d( ) 移动
   translate( ) Z轴位移
   scale3d( )缩放
   scaleZ( )Z轴缩放
   rotate3d( )指定元素具有旋转的角度
   rotateX（）、rotateY（）、rotateZ（）
   perspective（）透视投影矩阵
   matrix3d（）矩阵变形

transform-origin

1. 元素默认原点在元素中心点（可以为top/right/bottom/left/center/百分比/px等）
2. 但元素的位移始终是以元素中心点为原点

transform-style

默认flat元素在2D平面内 preserve-3d 元素在3D空间呈现，transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素。

transfrom-function

• translate 元素重新定位
  translate(dx, dy) X轴与Y轴的位移
  translate3D(x, y, z)
  在此要说明一种translateZ的情况，translateZ也就意味着定义元素离屏幕的距离
  

• rorate 旋转元素
  2d情况下，绕原点顺时针旋转相应角度
  3d情况下rotate3d(x,y,z,deg)原平面分别绕x轴，y轴，z轴旋转，其中x,y,z取值1或0，deg为所有为1部分旋转的角度，如：rotate3d(1,1,0,45deg)
  

• scale 缩放元素
  scale(x, y) x，y分别为x轴y轴放大缩小的倍数
  scale3d(x, y, z) 还有z轴上的缩放效果
  
• skew 倾斜元素
  只存在2d变换，不存在3d变换，且当平面倾斜至90度则看不到
  

perspective

perspective规定视距，即观察者和元素的距离，当距离越近的时候，元素的空间效果越强，相反则空间展现效果越弱。为元素定义此属性，其子元素会获得透视效果，该元素本身不会获得透视效果。

matrix 矩阵变形

。。