空间和动画

空间转换

空间位移

• transform：translate

  • X（）
  • Y（）
  • Z（）

透视

• perspective

  • 正常取值：600px-1200px

• 给父元素添加一个近大远小的效果

空间旋转

• transform：rotate

  • X（）
  • Y（）
  • Z（）

• 左手法则

  • 左手的大拇指指向的方向为正方向，四指弯曲的方向为旋转的正值方向

• 自定义轴旋转（了解）

  • transform：rotate3d（x,y,z,旋转的角度)

3d呈现

• transform-style

  • flat

    • 默认值：平面

  • preserve-3d

    • 开启3d环境

动画

定义动画

• @keyframes

调用动画

• animation：动画名称 动画执行时间 次数 速度曲线 延迟时间 反向播放 停留结束位置

• 速度曲线

  • ease

    • 默认值

  • linear

    • 匀速

  • steps（）

    • 逐帧动画

• 次数

  • infinite：无限次

• 反向播放

  • alternate

• 停留结束位置

  • forwards

• 暂停动画

  • animation-play-state：paused；

• 动画延迟

  • animation-delay