wxml代码

<view style="transform: rotateY(-20deg) rotateX(45deg) rotateZ(20deg); transform-style: preserve-3d;">
  <view style="display: flex;">
    <view class="cube">
      <view class="face front"></view>
      <view class="face back"></view>
      <view class="face top"></view>
      <view class="face bottom"></view>
      <view class="face right"></view>
      <view class="face left"></view>
    </view>
    <view class="cube">
      <view class="face front"></view>
      <view class="face back"></view>
      <view class="face top"></view>
      <view class="face bottom"></view>
      <view class="face right"></view>
      <view class="face left"></view>
    </view>
  </view>
</view>

css代码

.cube {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  transform-style: preserve-3d;
  transition: transform 1s ease-in-out;
}


.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.7);
  border: 2px solid black;
  box-sizing: border-box;
  text-align: center;
  font-size: 48px;
  line-height: 200px;
  transition: transform 1s ease-in-out;
}


.front {
  transform: translateZ(100px);
}


.back {
  transform: rotateY(180deg) translateZ(100px);
}


.top {
  transform: rotateX(-90deg) translateZ(100px);
}


.bottom {
  transform: rotateX(90deg) translateZ(100px);
}


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


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


.cube-rotated {
  transform: rotateY(90deg);
}

显示效果如图，真机演示效果图为，如在class='cube'旁加上style="transform: rotateY(-20deg) rotateX(45deg) rotateZ(20deg)"真机调试能正常显示