CSS中的3D旋转

一、3D旋转

格式：
transform：rotateX（旋转角度）
transform：rotateY（旋转角度）
transform：rotateZ（旋转角度）
transform：rotate3d（1,1,1,deg）
指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z取值为0/1 0表示不旋转 1表示旋转

注意： 第4个参数表示旋转的角度，参数不允许省略

注意： 浏览器默认是2d的，如果我们想要看到3d效果，需要添加一个视距属性。
视距：人眼与网页的距离。

perspective属性：
1.添加给变换元素的父元素。
2.设置的是人眼与网页平面的距离。
3.视距只是视觉上的效果，并不是真正的3D。

（了解）
判断旋转的方向：左手法则
左手握住旋转轴，大拇指指向旋转的正方向，其他手指卷曲的方向就是旋转的正方向。

二、3D位移：

格式：
  transform:translateX(位移量)
  transform:translateY(位移量)
  transform:translateZ(位移量)
  transform:translate3d(水平位移量，垂直位移量，Z轴位移量)

perspective：

translateZ为正值，perspective越来越小，则盒子与你的距离约近，看到的效果也就越大。
translateZ为0，perspective不管发生任何变化，看到的效果不变。
translateZ为负值，perspective越来越小，看到的效果越来越小。

使用perspective属性，看到的效果其实是元素投射在屏幕平面上的阴影。

三、动画

动画和过渡的区别：

1.过渡只能从一个状态到另一个状态，无法控制更加精细的过程。
2.过渡必须有触发事件，动画可以没有
3.过渡变化没有次数，动画可以指定次数。

关键帧 keyframes

动画使用过程
1.定义动画。通过@keyframes关键字。
2.在指定元素中，调用动画。通过anmiation属性来调用。

使用动画可以设置多个属性的变化过程。前提是这些属性是数值型的。

1、 指定要调用的动画，属性值为动画名（必填）
animation-name: dh2;

2、一次动画完成的时间（必填）
animation-duration: 2s;

3、动画执行的次数 默认是一次， 属性值为数字，不需要单位， infinite 无限循环播放。
animation-iteration-count: 1;

4、 动画执行的运动曲线
linear：线性匀速
ease：先加速后减速（默认）
ease-in:加速
ease-out：减速
ease-in-out：先加速后减速。

  animation-timing-function: linear;

5、运动方向

normal:正常，从初始帧到结束帧
reverse：从结束帧到开始帧
alternate:交替 第一次从初始帧到结束帧，第二次从结束帧到初始帧。
alternate-reverse:反向交替 第一次从结束帧到初始帧，第二次从初始帧到结束帧。

animation-direction:alternate;

6、 动画延迟时间

单位为s或者ms
只会在动画第一次执行时生效。

 animation-delay: 2s;

7、 动画的填充方式

backwards:在有延迟的情况下，让0%在延迟时间内就生效。（返回起始位置）
forwards:在动画结束后，让元素保持结束帧状态。
both：backwards和forwards都生效。

四、动画的复合写法

animation:动画名，完成时间，延迟时间，次数，运动曲线，运动方向，填充模式 ;

动画状态:

  paused 暂停
  running 运动

  animation-play-state:paused;

五、滤镜 filter

 1、 模糊  blur

   filter: blur(5px);

2、  透明度 opacity

  filter: opacity(.5); 

六、steps(n) 步

  将动画分为n步，逐步逐步去显示动画。
  eg：
     .box{
     width: 400px;
     height: calc(10560px/54);
     border: 1px solid #000;
     margin: 100px auto;
     background: url("img/3lxw.png") no-repeat;
     animation: lxw 3s steps(54) backwards;
   }
   @keyframes lxw {
     to{
       background-position-y: calc(10560px/54*-53);
     }
   }