SOURCE

console 命令行工具 X clear

                    
>
console
<div class="box">
  <div class="up">
    up
  </div>
  <div class="down">
    down
  </div>
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
  <div class="before">
    before
  </div>
  <div class="after">
    after
  </div>
</div>
<ul class="pt-select-wheel center">
  <li class="pt-select-wheel-item index1">
    5
  </li>
  <li class="pt-select-wheel-item index2">
    6
  </li>
  <li class="pt-select-wheel-item index3">
    7
  </li>
  <li class="pt-select-wheel-item index4">
    8
  </li>
  <li class="pt-select-wheel-item index5">
    9
  </li>
  <li class="pt-select-wheel-item index6">
    10
  </li>
  <li class="pt-select-wheel-item index7">
    11
  </li>
  <li class="pt-select-wheel-item index8">
    12
  </li>
  <li class="pt-select-wheel-item index9">
    13
  </li>
  <li class="pt-select-wheel-item index10">
    14
  </li>
  <li class="pt-select-wheel-item index11">
    15
  </li>
  <li class="pt-select-wheel-item index12">
    16
  </li>
  <li class="pt-select-wheel-item index13">
    17
  </li>
  <li class="pt-select-wheel-item index14">
    18
  </li>
  <li class="pt-select-wheel-item index15">
    1
  </li>
  <li class="pt-select-wheel-item index16">
    2
  </li>
  <li class="pt-select-wheel-item index17">
    3
  </li>
  <li class="pt-select-wheel-item index18">
    4
  </li>
</ul>
.pt-select-wheel {
  position: relative;
  margin: 10px auto;
  width: 200px;
  height: 25px;
  background: #000;
  transform-style: preserve-3d;
  transform: rotateY(89deg) rotateX(0deg);
  // transform: rotateY(-30deg) rotateX(57deg);
  .pt-select-wheel-item {
    position: absolute;
    width: 200px;
    height: 25px;
    background: #822e2e;
    opacity: .7;
  }
  .index1 {
    transform: rotate3D(1, 0, 0, 20deg) translateZ(100px);
  }
  .index2 {
    transform: rotateX(40deg) translateZ(100px);
  }
  .index3 {
    transform: rotateX(60deg) translateZ(100px);
  }
  .index4 {
    transform: rotateX(80deg) translateZ(100px);
  }
  .index5 {
    transform: rotateX(100deg) translateZ(100px);
  }
  .index6 {
    transform: rotateX(120deg) translateZ(100px);
  }
  .index7 {
    transform: rotateX(140deg) translateZ(100px);
  }
  .index8 {
    transform: rotateX(160deg) translateZ(100px);
  }
  .index9 {
    transform: rotateX(180deg) translateZ(100px);
  }
  .index10 {
    transform: rotateX(200deg) translateZ(100px);
  }
  .index11 {
    transform: rotateX(220deg) translateZ(100px);
  }
  .index12 {
    transform: rotateX(240deg) translateZ(100px);
  }
  .index13 {
    transform: rotateX(260deg) translateZ(100px);
  }
  .index14 {
    transform: rotateX(280deg) translateZ(100px);
  }
  .index15 {
    transform: rotateX(300deg) translateZ(100px);
  }
  .index16 {
    transform: rotateX(320deg) translateZ(100px);
  }
  .index17 {
    transform: rotateX(340deg) translateZ(100px);
  }
  .index18 {
    transform: rotateX(360deg) translateZ(100px);
  }
}

.box {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 200px auto;
  background: #000;
  transform-style: preserve-3d;
  transform: rotateY(-30deg) rotateX(57deg)
}

.box>div {
  width: 200px;
  height: 200px;
  opacity: 0.7;
  position: absolute;
}

.up {
  background: red;
  transform: rotateX(90deg) translateZ(100px)
}

.down {
  background: orange;
  transform: rotateX(-90deg) translateZ(100px);
}

.left {
  background: yellow;
  transform: rotateY(-90deg) translateZ(100px);
}

.right {
  background: blue;
  transform: rotateY(-90deg) translateZ(100px);
}

.before {
  background: cyan;
  transform: translateZ(100px);
}

.after {
  background: purple;
  transform: translateZ(-100px);
}