transform

四个常用功能

• 位移 translate
• 缩放 scale
• 旋转 rotate

• 倾斜 skew

  经验

• 一般都需要配合 transition 过渡

• inline 元素不支持 transform，需要先变成 block

  transform 之 translate

  常用写法

• translate ()

• translate ()
• translate (, ?)
• translate (）且父容器 perspective translate3d (x, y, z)

演示

经验

• 学会看MDN语法示例
• translate(-50%,-50%) 可以做绝对定位元素的居中

transform 之 scale

常用写法

• scaleX()
• scaleY()
• scale (, ? )

演示

经验

用得较少，因为容易出现模糊

transform 之 rotate

常用写法

• rotate ([ | ])
• rotateZ ([ | ])
• rotateX ([ | ])
• rotateY ([ | ])
• rotate3d 太复杂，无法用语言表述

演示

经验

• 一般用于 360 度旋转制作 loading

• 用到时再搜索 rotate MDN 看文档

  transform 之 skew

  常用写法

• skewX ([ | ])

• skewY ([ | ])
• skew ([ | ], [ | ]?)

演示

经验

• 用得较少
• 用到时再搜 skew MDN 文档

实践

跳动的心