丸子学CSS（学习1小时 - 3D转换与关键帧）

3D转换

三维变换使用基于二维变换的相同属性，可以让我们基于三个坐标方向对元素进行变换。和二维变形一样，三维变形可以使用transform属性来设置

3D移动

translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写，如：translateX(length),translateY(length), translateZ(length)

3D缩影

scale3d(number,number,number)使元素在这三个纬度中缩放，也可分开写，如：scaleX(),scaleY(),scaleZ()

3D旋转

a) rotate3d(x,y,z,angle)：指定需要进行旋转的坐标轴
a) rotateX(angle) 是元素依照x轴旋转；
b) rotateY(angle) 是元素依照y轴旋转；
c) rotateZ(angle) 是元素依照z轴旋转

3D透视/景深效果

左手法则：大拇指指向当前坐标轴的下方向，手指环绕的方向就是正方向

• perspective(length)
  为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。当perspective:none/0;
  时，相当于没有设perspective(length)。比如你要建立一个小立方体，长宽高都是200px。如果你的
  perspective < 200px ，那就相当于站在盒子里面看的结果，如果perspective 非常大那就是站在非常远的地方看（立方体已经成了小正方形了），意味着perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果
• perspective-origin 属性规定了镜头在平面上的位置，默认是放在元素的中心
• transform-style 使被转换的子元素保留其3D转换(需要设置在父元素中）

flat   子元素将不保留其3D位置——平面方式
preserve-3d  子元素将保留其3D位置——立体方式

尝试一下

  body,html {
    background: #222;
    font-size: 22px;
    color: rgb(18, 204, 250);
  }
  .page {
    position: relative;
    max-width: 640px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: #373737;
  }
  .cude{
    position:absolute;
    top:200px;
    left:100px;
    width: 100px;
    -webkit-perspective: 1000px;
    perspective: 1500px;
  }
  .dice {
    position: absolute;
    width: 300px;
    height: 300px;
    transform: rotateX(-15deg) rotateY(47deg);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    animation: rotate 6s linear infinite alternate;
  }
  
  .dice .side {
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    background: rgba(241, 160, 8,.4);
    text-align: center;
    line-height:300px;
    color:#fff;
    font-size:40px;
    font-weight: bold;
    border:1px solid orange;
    animation: move 6s linear infinite alternate-reverse;
  }
  .front{
    transform:translateZ(150px);
  }
  .top{
    transform: rotateX(90deg) translateZ(150px);
  }
  .bottom{
     transform: rotateX(-90deg) translateZ(150px);
  }
  .left{
        transform: rotateY(-90deg) translateZ(150px);
}
  .right{
    transform: rotateY(90deg) translateZ(150px);
  }
  .back{
     transform: rotateY(-180deg) translateZ(150px);
  }
  @keyframes move {
    0% {}
    100% {
      width: 300px;
      height: 300px;
    }
  }
  @keyframes rotate {
    0%{
      transform: rotate3d(0,0,0,0deg);
    }
    100% {
      transform: rotate3d(45,45,45,720deg);
    }
  }

关键帧动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

• 必要元素
  a. 通过@keyframes指定动画序列； 自动补间动画，确定两个点，系统会自动计算中间过程，这两个点就称为关键帧，可以设置多个关键帧
  b. 通过百分比将动画序列分割成多个节点
  c. 在各个节点中分别定义各属性
  d. 通过animation将动画应用于相应元素
• animation常用属性
  a. 动画序列的名称:animation-name: move;
  b. 动画的持续时间:animation-duration: 1s;
  c. 动画的延时:animation-delay: 1s;
  d. 播放状态:animation-play-state: paused|running;
  e. 播放速度:animation-timing-function: linear;
  f. 播放次数 反复:animation-iteration-count: 1;
  g. 动画播放完结后的状态:animation-fill-mode: forwards;
  h. 循环播放时，交叉动画:animation-direction: alternate;

先来看个简单的demo

尝试一下

  .wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 1100px;
    height: 900px;
    overflow: hidden;   
    animation: dropdown 6s linear infinite;
  }
  .container {
    position: absolute;
    left: 0;
    width: 25300px;
    height: inherit;
    animation: move 2s steps(23) infinite ;
  }
  .container img {
    float: left;
    width: 1100px;
    height: 900px;
  }
  @keyframes move{
    to{
      left: -25300px;
    }
  }
  @keyframes dropdown{
    0%{
      top: -1900px;
    }
    40%,70%{
      top: 0;
    }
    100%{
      top: 1900px;
    }
  }
  .txt {
    position: absolute;
    left: -236px;
    width: 300px;
    font-size: 48px;
    color: orange;
    text-shadow: 0 0 18px deeppink;
    writing-mode: vertical-rl;
    
    animation: gogogo 10s ease-in infinite;
  }
  @keyframes gogogo{
    from{
      top: -500px;
    }
    to{
      top: 1000px;
    }
  }
  .wrapper:before {
    position: absolute;
    left: 0;
    z-index: 99;
    content: "";
    width: 8px;
    height: 900px;
    background: deepskyblue;
    box-shadow: 0 0 10px 4px skyblue;
    animation: line 6s infinite alternate;
  }
  .wrapper:after {
    position: absolute;
    right: 0;
    z-index: 99;
    content: "";
    width: 8px;
    height: 900px;
    background: deepskyblue;
    box-shadow: 0 0 10px 4px skyblue;
    animation: line 6s infinite alternate;
  }
  @keyframes line{
    from{
      height: 0;
    }
    to{
      height: 900px;
    }
  }