移动web，3d，动画，景深、透视、视距

3d变换

空间坐标系

• Z轴屏幕到人眼的方向是正方向

3d平移

• transform: translateZ();
• transform: translate3d(x,y,z);

景深、透视、视距

• perspective
• 300px - 1200px
• 安排一只眼睛帮我们观测页面中的元素在z轴上的变化

3d旋转

• transform: rotateZ(deg) = transform: rotate(deg)

• transform: rotateX()

  • 体操

• transform: rotateY()

  • 钢管舞

• 左手定则：左手大拇指指向轴线的正方向，四指弯曲的方向为旋转的方向

• 了解

  • 自定义轴旋转
  • transform: rotate3d(x, y, z, deg)
  • xyz决定轴线方向

3d呈现

• transform-style

  • preserve-3d

动画

定义动画

• @keyframes 动画名 { from {} to {} }
• @keyframes 动画名 { 0% {} 100% {} }

调用动画

• 动画名称

  • 必写

• 单次动画执行时间

  • 必写
  • s ms

• 执行次数

  • infinite 无限次
  • 也可以写具体数字

• 是否反向播放

  • alternate
  • 注意 反向播放也会占用一次执行次数

• 延迟

  • animation-delay
  • s ms

• 速度曲线

  • linear

    • 匀速

  • steps(次数)

    • 逐帧动画

• 结束时停留的位置

  • forwards
  • 停留在结束位置