移动web第二天

空间转换

空间平移

• transform：translate3d(x,y,z)

  • 空间水平垂直前后平移（3d视图平移）

• transform：translateX()

  • 空间水平平移

• transform：translateY()

  • 空间垂直平移

• transform：translateZ()

  • 空间前后平移

透视、视距、景深

• perspective

  • 取值范围是600-1200px
  • 该属给元素的父元素添加，使元素有近大远小，近实远虚效果

空间旋转

• transform：rotateX()

  • 围绕X轴旋转

• transform：rotateY()

  • 围绕Y旋转

• transform：rotateZ()

  • 围绕Z轴旋转

• 扩展

  • 自定义旋转轴

    • transform：rotate3d(x,y,z,旋转角度deg)

  • 同时在两个坐标轴线上旋转

    • transform：rotateX() rotateY();通常应用场景 3D导航，给开发者或用户提供一个上帝视角，可以直观立体元素表现

3D立体呈现

• transform-style

  • 默认值：flat,平面的意思

  • preserve-3d

    • 开启3D环境

  • 该属性给元素的父元素添加，使元素旋转有3d立体视觉

动画

定义动画

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

使用（调用）动画

• animetion:动画名称 动画执行时间 动画执行次数(infinite-无限) 动画执行速度曲线(linear-匀速 steps()-逐帧) 动画反向执行(alternate-反向) 动画停留结束位置(forwards)

• animation-timing-function-动画速度曲线

  • 默认：ease
  • linear 匀速
  • steps() 逐帧动画

查看动画速度曲线属性值路径：cubic-bezier.com/#.17,.67,.8…

• animation-play-state：paused

  • 暂停动画

• animation- delay:

  • 动画延迟时间