3D变换 & 动画

3D变换

1. transform之3d移动变换:

transform:translate3d(x,y,z)
/* z:代表在垂直于平面的轴上移动，电脑屏幕往人眼那个方向为正方向。
   transform:translateZ(z) 【女神上来】 */

2. transform-style规定变换的样式（父元素）

/* 属性值：flag平面（默认）    preserve-3d保持3d变换 */
transform-style: preserve-3d  /* 保持3d变换 */

3. 设置观察的距离，景深 perspective : value(父元素) 【案例女神向我走来 】

4. transform 之 rotate3d

   transform : rotate3d(x,y,z,角度)
   此时x、y、z取值为0或1，0代表不旋转，1旋转
   transform : rotateX(角度) transform : rotateY(角度)  transform : rotateZ(角度)
   /* 备注：左手定律，大拇指指向轴的正方向，手指弯曲的方向为旋转的正方向 【体操】 */ 

5. 立方体
   改变盒子变换的基准点 transform-origin
perspective-origin 观察的基准点(角度)

动画

1. 自定义动画
   (1) 通过@keyframes指定动画序列；

@keyframes{
    0%{}
    50%{}
    70%{}
    100%{}
}

  (2) 通过百分比将动画序列分割成多个节点；
  (3) 在各节点中分别定义各属性
  (4) 通过animation属性将动画应用于相应元素；

2. animation属性
   (1) animation-name: 动画名字(必须)

   (2) animation-duration: 动画播放时间（必须）

   (3) animation-timing-function: 动画播放的形式
     属性值： linear线性 ease ease-in steps(n)

   (4) animation-delay: 动画播放的延迟

   (5) animation-iteration-count: 动画播放的次数
     属性值：infinite无限次播放

   (6) animation-direction: 动画是否轮流反向播放
     属性值: alternate交替播放   reverse反向播放   alternate-reverse 轮流反向

     简写顺序：animation : 1 2 3 4 5 6 ;

  补充：
    (1) animation-play-state : paused; 暂停动画
    (2) animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见。
      属性值：forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）