卡牌正反面的需求。等效代码在 chrome 是没有问题的，但在小程序开发工具和安卓上有问题。（iOS 没测）

具体问题：如果卡牌正反面只是图片，正反显示都没问题。如果卡牌正反面是容器，里面有图片和文字。卡牌翻转过来，正反面的文字都显示了。预期只显示某一面的文字。

// wxml
<view class="card-wrapper {{ status ? 'show-cover' : '' }}">
  <view class="cover-image">
    <image class="card-image" src="{{ coverImage }}" />
    <text class="card-text">{{ text }}</text>
  </view>
  <view class="back-image">
    <image class="card-image" src="{{ backImage }}"></image>
    <text class="card-text">{{ text }}</text>
  </view>
</view>

// wxss
.card-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

.card-wrapper.show-cover {
  transform: rotateY(180deg);
}


.cover-image,
.back-image {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility: hidden;
}


.cover-image {
  transform: rotateY(180deg);
  transform-origin: center;
}


/* .back-image {
  backface-visibility: hidden;
} */


.card-image {
  width: 100%;
  height: 100%;
}


.card-text {
  display: block;
  width: 100%;
  line-height: 1;
  margin-top: -120rpx;
  text-align: center;
  color: white;
  font-size: 36rpx;
  text-shadow:1px 2px 4px rgba(27,95,168,0.6);
}


.back-image .card-text {
  opacity: 0.4;
  margin-top: -128rpx;
}