背景

在一次需求里面看到静止摆放的三张图，后来才知道，那三张图是要做动画的，类似那种3D循环的。思考几秒钟如何实现

实现

emmm，其实我的css一般般，css写动画就更加一般般了。刚开始看到的时候我有些慌，我也不知道要如何实现，我之前也没有写过。思考一会

既然我无法下手，那我就观察别人是怎么实现的，通过控制台调试工具，我发现别人使用过控制class实现的。观察一会以后我就找到了规律，然后我就实现了

实现原理：

按照设计稿摆好位置

  <div class="wrapper">
      <div class="box1 box" data-index="0"></div>
      <div class="box2 box" data-index="1"></div>
      <div class="box3 box" data-index="2"></div>
  </div>
  .wrapper{
    margin: 60px;
    position: relative;
    height: 200px;
    background-color: rgba(0,0,0,.4);
  }
  .box{
    border: 1px red solid;
    position: absolute;
    width: 120px;
    height: 160px;
    top: 50%;
    left:50%;
    transition-duration: .3s;
  }
  .box1{
      background-color: burlywood;
  }
  .box2{
      background-color: cornsilk;
  }
  .box3{
      background-color: darkred;
  }
  [data-index="0"]{
      transform: scale(1) translate(-50%,-50%);
      z-index: 1;
  }
  [data-index="1"]{
      transform: scale(.8) translate(-160%,-60%);
  }
  [data-index="2"]{
      transform: scale(.8) translate(30%,-60%);
  }

动画的过程中就是不断的改变位置的方向,依次向左移动移动，围城一个环，不断的循环

  let boxEle = document.querySelectorAll('.box')
  function roll(){
      setTimeout(function run(){
        boxEle.forEach(item=>{
            let index = item.dataset['index']
            index==2&&(index=-1)
            item.setAttribute('data-index',+index+1)
        })
        setTimeout(run,3000)
      },3000)
  }
  roll()

位置移动的过程中加入动画完成的时间

transition-duration: .3s;

代码实现完了

点点看

总结

人生的意义在于，体验没有体验过的人生，做没有做过的事，我们才会不断的成长。只有经历了足够多的痛苦和磨难，才能像妈妈一样强大。

需求亦是这样，一直做做过的需求没有调整，不会成长。我们需要做一些不一样的需求，不会做的时候就看看人家有没有实现过。有的话，就自己看看人家咋实现了，大概估计一下，就能实现了。不会的话，就自己摸石头过河，自己看着来。

愿大家永远开心快乐的像个孩子一样

sunseekers

3D 轮播动画

背景

实现

总结

文档信息

Search

Table of Contents