移动web第二天

空间转换

空间位移

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

透视、景深、视距

• perspective

  • 600px - 1200px

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

空间旋转

• 围绕x轴旋转

  • transform: rotateX()

• 围绕y轴旋转

  • transform: rotateY()

• 围绕z轴旋转

  • transform: rotateY()

• 左手定则

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

• 了解

  • 自定义轴旋转

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

  • 同时在两条轴线上旋转

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

3d呈现

• transform-style

  • flat

    • 平面
    • 默认值

  • preserve-3d

    • 开启3d环境

动画

定义动画

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

调用动画

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

• 速度曲线

  • ease

    • 默认
    • cubic-bezier.com/#.17,.67,.8…

  • linear

    • 匀速

  • steps()

    • 逐帧动画

• 次数

  • infinite

    • 无限次

• 反向播放

  • alternate

• 停留结束位置

  • forwards

• 暂停动画

  • animation-play-state: paused; 一般在hover使用

• 动画延迟

  • animation-delay