css 3d旋转的问题

效果：        变为 

.box {
    position: relative;
    left: -.1rem;
    display: inline-block;
    width: 1.8rem;
    margin-left: .3rem;
    -webkit-border-radius: .2rem;
    -moz-border-radius: .2rem;
    border-radius: .2rem;

    /*perspective: 1000px;*/
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;    // 保留子元素3d位置

    -webkit-transform: rotatey(0);    //舞台旋转的初始位置
    -moz-transform: rotatey(0);
    -ms-transform: rotatey(0);
    -o-transform: rotatey(0);
    transform: rotatey(0);
}
.rotateBox {
    -webkit-transition: transform 1s;   //舞台旋转所用的时间
    -moz-transition: transform 1s;
    -ms-transition: transform 1s;
    -o-transition: transform 1s;
    transition: transform 1s;

    -webkit-transform: rotatey(180deg);    //舞台旋转后的状态
    -moz-transform: rotatey(180deg);
    -ms-transform: rotatey(180deg);
    -o-transform: rotatey(180deg);
    transform: rotatey(180deg);
    
}
/*,旋转后展示在前的图片 默认位置在span 后面*/
.backImg {
    position: absolute;
    top:0;
    left:0;
    z-index: -5;                //图片初始不可见，在当前区域的背后
    -webkit-border-radius: .2rem;
    -moz-border-radius: .2rem;
    border-radius: .2rem;

    -webkit-transform: rotatey(180deg);    //图片初始旋转180deg，舞台旋转180deg后，图片相当于未旋转
    -moz-transform: rotatey(180deg);
    -ms-transform: rotatey(180deg);
    -o-transform: rotatey(180deg);
    transform: rotatey(180deg);
}

说明：盒子作为舞台，需要设置

transform-style: preserve-3d;   //保留子元素3d位置