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);
.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);
}