鳕鱼天空

.coinview {
  width: 320px;
  height: 320px;
  margin-left: -160px;
  margin-top: -160px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  /* animation: spin 2s linear infinite; */
}

.back, .middle,.front{
   background-size: contain;
  border-radius: 50%;
  width: 320px;
  height: 320px; 
}

.back {
  background-image: url("a.png");
}

.middle {
  background-image: url("b.png");
  position: absolute;
  top: 0;
}

.front {
  background-image: url("b.png");
  position: absolute;
  top: 0;
  transform: translateZ(10px);
}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

.coinview.s1 {
  animation: spin 0.25s linear infinite;
}

.coinview.to1{
  transform: rotateY(0deg);
}

.coinview.to2 {
  transform: rotateY(180deg);
}

view

<i-spin i-class="iconfont" size="large" fix wx:if="{{coining}}" custom>
  <view class="coinview {{coinTransForm?'s1':(coin180?'to1':'to2')}}" catch:tap="tapStopCoin">
    <view class="back"></view>
    <view class="middle" style="transform: translateZ(1px)"></view>
    <view class="middle" style="transform: translateZ(2px)"></view>
    <view class="middle" style="transform: translateZ(3px)"></view>
    <view class="middle" style="transform: translateZ(4px)"></view>
    <view class="middle" style="transform: translateZ(5px)"></view>
    <view class="middle" style="transform: translateZ(6px)"></view>
    <view class="middle" style="transform: translateZ(7px)"></view>
    <view class="middle" style="transform: translateZ(8px)"></view>
    <view class="middle" style="transform: translateZ(9px)"></view>
    <view class="front"></view>
  </view>
</i-spin>