2D动画

transform
transform属性允许你旋转，缩放，倾斜或平移给定元素

• 平移：translate(x,y)
• 缩放：scale(x,y)
• 旋转：rotate(deg)
• 倾斜：skew(deg,deg)
  坐标系
  用transform属性变换的元素会受transform-origin的影响，该属性用于指定形变的原点。
  css中的每个元素都有一个坐标系，其原点位于元素的左上角，左上角这被称为初始坐标系
  用transform时，体系的原点默认会移动到元素的中心
  因为transform-origin的默认值为50% 50% left,right,top,bottom

3d

translate3d(tx,ty,tz)
=translatex,translatey,translatez
scale3d(sx,sy,sz)
=scalex,scaley,scalez
rotate3d(x,y,z,a)
=rotatex,rotatey,rotatez
3d函数会创建一个合成层来启用GPU硬件加速

3d透视

perspective 近大远小
定义了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果

3d空间

transfrom-style
该css属性用于设置元素的子元素是定位在3d空间中还是平展在元素的2d平面中
flat 2d,preserve-3d 3d