移动Web第二天

空间转换

空间位移

• transfrom:translateX()
• transfrom:translateY()
• transfrom:translateZ()
• transfrom:translate3d(x,y,z)

透视，视距，景深

• perspective

  • 600px-1200px

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

空间旋转

• 围绕X轴旋转

  • transfrom:rotateX()

• 围绕Y轴旋转

  • transfrom:rotateY()

• 围绕Z轴旋转

  • transfrom:rotateZ()

• 左手定则

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

了解

• 自定义轴旋转

  • transform:rotate3d(x,y,z,旋转的角度)

• 同时在两条轴线旋转

  • transfrom:rotateX() rotateY()
  • 3d导航的时候给我们提供了上帝视角

3d呈现

• transform-style

  • flat

    • 平面
    • 默认值

  • presreve-3d

    • 开启3d环境

动画

定义动画

• @keyframes 动画名称

{ from{} to{} }

• @keyframes 动画名称

  {   
     0%{}     
      50%{}      
   100%{}  
   }
  

调用动画

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

• 速度曲线

  • ease

    • 默认

  • linear

    • 匀速

  • steps()

    • 逐帧动画时使用

• 次数

  • infinite

    • 无限次

• 反向播放

  • alternate

• 停留结束位置

  • forwards

• 暂停动画

  • animation-play-state:paused

• 动画延迟

  • animation-delay

    欢迎大佬们补充！