css3完成图片3d立体旋转效果

<view class="cuboidBox">
    <view class="cuboidFace frontFace"><image class="mold2_img" src="{{photoImg ? photoImg : 'http://flyclient.heywoodsminiprogram.com/albumImages/matrix/detail/1/moldImg.png'}}" mode="widthFix"></image></view>
    <view class="cuboidFace backFace"><image class="mold2_img" src="{{photoImg ? photoImg : 'http://flyclient.heywoodsminiprogram.com/albumImages/matrix/detail/1/moldImg.png'}}" mode="widthFix"></image></view>
    <view class="cuboidFace leftFace"><image class="mold2_img" src="{{photoImg ? photoImg : 'http://flyclient.heywoodsminiprogram.com/albumImages/matrix/detail/1/moldImg.png'}}" mode="widthFix"></image></view>
    <view class="cuboidFace rightFace"><image class="mold2_img" src="{{photoImg ? photoImg : 'http://flyclient.heywoodsminiprogram.com/albumImages/matrix/detail/1/moldImg.png'}}" mode="widthFix"></image></view>
</view>

.cuboidBox {
    width: 100%;
    height: 86%;
    position: absolute;
    transform: translate3d(0, -1000px, 0);
    transform-style: preserve-3d;
    animation: cuboidInDown 2s 2s linear forwards, rotateCuboid 12s 4s linear forwards infinite;
    .cuboidFace {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 5;
        width: 600rpx;
        height: 100%;
        .mold2_img{
            width: 100%;
            height: 100%;
            display: block;
        }
    }
    .frontFace {
        transform: translateZ(300rpx);
    }
    .backFace {
        transform: rotateX(0deg) translateZ(-300rpx) scale(-1, 1);
    }
    .leftFace {
        transform: rotateY(-90deg) translateZ(300rpx);
    }
    .rightFace {
        transform: rotateY(90deg) translateZ(300rpx);
    }
}
@keyframes cuboidInDown {
    0% {
        top: 10%;
        transform: translate3d(0, -1000px, 0) rotateY(30deg) scale(.6);
    }
    100% {
        top: 10%;
        transform: translate3d(0, 0, 0)  rotateY(0deg)  scale(.6);
    }
}
@keyframes rotateCuboid {
    0% {
        top: 10%;
        transform: rotateX(6deg) rotateY(0deg) scale(.6);
    }
    50% {
        top: 10%;
        transform: rotateX(6deg) rotateY(180deg) scale(1);
    }
    100% {
        top: 10%;
        transform: rotateX(6deg) rotateY(360deg) scale(.6);
    }
}