13、CSS3 3D及动画

一、CSS3 3D

1、3d的概念

  在2d场景中，我们的图形是一个平面，拥有一条水平的X轴和一条垂直的Y轴。
  在3d场景中，在垂直于屏幕的方向，相较于2d多了条z轴，z轴垂直于屏幕。
  在3d中的Z轴，靠近屏幕的是正向，远离屏幕的是负向。(可以理解为Z轴朝脸，距离脸近是正，距离脸远时负。)

2、景深和近大远小（视觉3d） perspective

  1）近大远小：在我们的生活中我们平常看物体，当一个物体离我们较远时，我们会觉得它比较小，当物体离我们比较远的时候，我们会觉得它比较大，这就是近大远小效果
  2）景深：在我们的页面中，如果也能拥有近大远小的效果时，这样页面看起来就会有3d的感觉。但是页面是一个平面，没有远近概念，此时，可以通过perspective属性，来给元素添加一个环境深度，页面就拥有了视觉上的近大远小的效果
  3）设置景深：给需要3d效果元素的父元素设置景深，通常数值在900-1200
  4）3d观察点：观察点默认在正中间，可通过perspective-origin改变观察点
    	perspective-origin：center center;（默认值）

3、页面中的3d空间设置（空间3d） transform-style

  transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现,该属性同样也要设置在父元素身上。
    属性值：
      flat          2D平面
      preserve-3d   3D空间

4、3d位移 translate3d()

  案例:transform:translate3d(x,y;z);
  特点:
    1）三个参数，第一个为x轴位移，第二个为Y轴位移，第三个为Z轴位移。
    2）translateZ()属性可以单独控制Z轴位移。
    3）需要将父元素变为3d空间并且加景深才能看到效果

5、3d旋转 rotate3d()

  案例: transform: rotate3d(0,0,1, 30deg);
  特点:
    1）四个参数，第一个参数为X轴矢量，第二个参数为Y轴矢量，第三个参数为z轴矢量，第四个参数为旋转角度。（矢量中，1代表旋转，0代表不旋转）
    2）支持单独设置: transform:rotateX(30deg) rotateY(30deg) rotateZ(30deg);

6、3d缩放 scale3d()

案例：transform：scale3d(1,1,1);
特点：
  1）xyz，不可省略
  2）支持scaleZ()，不过Z轴缩放在平面中看不到效果，需要搭配立体图形使用，即搭配其他3d效果使用
  3）用几次后会发现，此属性一般是加给大盒子的，即写给整体的

二、动画

1、CSS3属性中有关于制作动画的三个属性：

 transform,transition,animation

2、animation和transition的区别

相同点：
  都是随着时间改变元素的属性值。
不同点：
  1）transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性； 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。
  2）过渡只能定义初始状态和终止状态，但是关键帧动画可以设置过程
  3）过渡只能执行一次，动画想执行几次都可以

3、格式

anmation: 动画名 动画持续时间 动画速率 延迟时间 执行次数 动画方向 动画状态;
   animation-name              动画名 
   animation-duration          动画持续时间（一次的动画持续时间） 
   animation-timing-function   动画速率 
   animation-delay             延迟时间（动画开始之前的延迟） 
   animation-iteration-count   执行次数 
   animation-direction         动画方向
       normal：正常方向
       reverse：反方向
       alternate：先正向运行再反向运行，并持续交替运行
       alternate-reverse：先反向运行再正向运行，并持续交替运行
   animation-play-state        动画状态
       running（默认值）：运动
       paused：暂停

4、关键帧

  @keyframes xxx{ 
    from{初始状态属性}
    to{结束状态属性}
  }
  或
  @keyframes xxx{
    0%{初始状态属性}
    ...（中间再可以添加关键帧）
    100%{结束状态属性}
  }