WXSS rotateX为什么失效？

想试着按照CSS教材画3d立方体，结果各个面的样式transform中rotateX/Y无效，translateZ有效？

<view id="stage">

<view id="container">

<view class="slide1 front1">front</view>

<view class="slide1 top1">top</view>

<view class="slide1 bottom1">bottom</view>

<view class="slide1 left1">left</view>

<view class="slide1 right1">right</view>

<view class="slide1 back1">back</view> 

</view></view>

#ea{

  width: 100%;

  height:auto;

  background-color: rgb(187, 189, 185);

  position: relative;

  left:300rpx;

  bottom: 200rpx;

}

.side{

  height: 200rpx;

  width: 200rpx;

  position: absolute;

  font-size: 50rpx;

  color:black;

  text-align: center;

  font-weight: bold;

  line-height: 100rpx;

}

.top{

  background-color: red;

  transform: rotate(-45deg) skew(15deg,15deg);

}

.left{

  background-color:rgb(120, 151, 243);

  transform: rotate(15deg) skew(15deg,15deg) translate(-50%,100%);

}

.right{

  background-color:green;

  transform: rotate(-15deg) skew(-15deg,-15deg) translate(50%,100%);

}

#stage{

  width:100%;

  height: 1000rpx;

  margin:100rpx auto;

  position: relative;

  perspective: 300rpx;

  background-color: snow;

}

#container{

  transform-style: preserve-3d;

}

.slide1{

   background-color: rgba(255,0,0,0.3);

   border: 5rpx solid red;

   font-size: 60rpx;

   font-weight: bold;

   color: #fff;

   text-align: center;

   height: 300rpx;

   line-height: 150rpx;

   width: 300rpx;

   text-shadow: 0 -10rpx 5rpx rgba(0,0,0,0.2);

   text-transform: uppercase;

   position: absolute;

   left: 200rpx;

   top: 200rpx;

}

.front1{

transform: translateZ(100rpx);

}

 .back1{

transform: rotateX(80deg),translateZ(100rpx);

background-color: tomato;

}

.right1{

transform: rotateY(40deg),translateZ(100rpx);

}

.left1{

transform: rotateY(-90deg),translateZ(100rpx);

}