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