1. transform 不会改变页面布局，只是绘制层改变元素位置

2. Flow layout + inline element 不生效（可使用 display: inline-block）

• transform 属性值（支持混合下面的一个或多个变换）

  • translate 修改水平/垂直位置

  • scale 改变大小

    • 注意：scale 将内部元素视为一个整体，一同放大/缩小

  • rotate 旋转

    • deg 角度

    • turn 圈数

  • skew 变形（矩形，一对对边不变、另一对对边旋转）

    • 可用于创建对角线装饰元素

      • 

        
        

• transform-origin 可以修改变换的中心

  • 默认 center

  • 可选 left top 即左上角、25px bottom 0% 150% 等值

当使用百分比时，依据的是它的 bounding box，即水平相对于它本身的宽度、垂直相对于它本身的高度

组合变换：使用多种变换时，变换的的次序会影响变换的效果，各种变换会依次被应用

• 例：先旋转 rotate 再移动 translate

  •