效果：        變為 

.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位置