移动web第二天

3D位移

transform:translateX(）

transform：translateY（）

transform:translatez(）

transform:translate3d(x，y，z）

透视

perspective

• 一般正常值600px——1200px

空间转换

围绕x轴旋转

• transform：roateX()

围绕y轴旋转

• transform:roateXY(）

围绕z轴旋转

• transform:roateXZ(）

左手定则

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

同时在两条轴线上旋转

• transform:roateX() roateY()
• 为3d导航提供上帝视角

3d呈现

tramfrom-style

• preserve

  • 开启3d环境

动画

定意动画

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

调动动画

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

• 速度曲线

  • ease

    • 默认

  • linear

    • 均速

  • steps（）

    • 逐帧动画

• 次数

  • infinite 无限次

• 反向播放

  • alternate

• 停留结束位置

  • forwards

• 暂停位置

  • animation-piay-state：paused

• 动画延迟

  • animation-delay

\