列表图片css3d拼接旋转效果

1.页面

 <van-grid :border="false" :column-num="2">
      <van-grid-item @click="toThree" v-for="item in mainlist" style="margin-top: 20px;">
        <div class="box" style="height:150px;width:100px;margin-top: -30px;margin-left: -30px;">
          <img class="box1 one" :src="item.CertificatePic" />
          <div class="box2 one" style="background:#333"></div>
          <div class="box3 three"></div>
          <div class="box4 three" style="background:#333"></div>
          <div class="box5 two"></div>
          <div class="box6 two"></div>
        </div>
        <p>{
   
   { item.CertificateName }}</p>
      </van-grid-item>
    </van-grid>

2.js部分

主要是注意一下写在data里面的数据，图片的路径值

 CertificatePic: require('../assets/1.png')

3.css部分

<style>
.main {
  perspective: 800px;
}

.box {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 60px 70px;
  transform: rotateX(-10deg) rotateY(25deg) rotateZ(0deg);
  animation: move 5s linear 0s infinite;
}

.one {
  width: 120px;
  height: 150px;
}

.two {
  width: 120px;
  height: 20px;
}

.three {
  width: 20px;
  height: 150px;
}

.box>div {
  position: absolute;
  left: 0;
  top: 0;
}


.box1 {
  /* background-image: url('./css/aaa.png'); */
  background-position: center;
  background-size: 100%;
  transform: translateZ(10px);
}

.box2 {
  background: #333;
  transform: translateZ(-10px);
}

.box3 {
  background: #fff;
  transform: translateX(110px) rotateY(90deg);
}

.box4 {
  background: #fff;
  transform: translateX(-10px) rotateY(90deg);
}

.box5 {
  background: #fff;
  transform: translateY(-10px) rotateX(90deg);
}

.box6 {
  background: #fff;
  transform: translateY(140px) rotateX(90deg);
}

@keyframes move {
  form {
    transform: rotateX(-10deg) rotateY(25deg) rotateZ(0deg);
  }

  to {
    transform: rotateX(-10deg) rotateY(-335deg) rotateZ(0deg);
  }
}
</style>