移动端 3d空间转换和动画的定义与使用

空间转换

属性值 transform

旋转

• transform: rotate(90deg)

  • 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

• rotateX

• rotateY

• rotateZ

  • 像视眼方向移动

位移

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

透视 景深 视距

• perspective: 值;(400-1200)
• 添加给父元素
• 近大远小

3D立体呈现 tfs

• transform-style: preserve-3d

• 3D导航时 给我们提供上帝的视角

  • transfrom: rotetaX rotetaY;

动画

animation

• 定义动画

  • @keyframes 自定义类名 form { } to { }

    • @keyframes move { 20% { } 50% { } 100% { }

• 使用动画

  • animation: 动画名称 播放时间 匀速曲线 播放次数 反向播放 停留播放位置 ;

    • 匀速 linear 无限次播放 infinite 反向播放alternate 停留在结束位置 forwards

  • 延迟播放

    • animation-delay

  • 暂停播放

    • animation-paly-sate: paused

      • 一般搭配hover使用

• 逐帧动画

  • steps实现逐帧动画
  • 一般配合精灵图实现动画效果

\