变形

2D变换（transform）

• rotate 旋转
• translate 平移
• skew 斜切
• scale 缩放
• transform-origin 基点的变换
• 变换组合 顺序是从右往左的，变换的底层其实就是矩阵的运算

3D变换

• perspective，灭点
  • 景深的写法：
    • 2种写法。一种css属性，一种是transform属性的一个变换函数（必须在第一位）
  • 景深的作用：
    • 构建3D舞台，决定用户的肉眼距离屏幕的水平距离！使3D变换的元素具有近大远小的感觉
  • 景深和灭点的关系
    • 景深越大，灭点越远，元素变形越小
    • 景深越小，灭点越近，元素变形越大
  • 景深基点
  • 景深叠加
  • 景深是一个不可继承属性，但他可以作用于所有的后代元素
• transform-style
  • transform-style的作用
    • 构建3D舞台，使3d舞台有层次感
  • transform-style是一个不可继承属性，他只作用于子元素
• backface-visibility
  • 隐藏元素背面
    • 一个元素分两面，但并不意味元素有厚度。在一个状态下，元素只能展现自己的一面