用CSS3+JS实现翻转效果，出现的问题有些不解。

<body>
<div id="allcard">
<div class="card" id="card1">1</div>
<div class="card" id="card2">2</div>
<div class="card" id="card3">3</div>
<div class="card" id="card4">4</div>
<div class="card" id="card5">5</div>
<div class="card" id="card6">6</div>
</div>
<div id="op">
<div class="bott" id="bott1">翻转吧 ，扑克牌</div>
<div class="bott" id="bott2">倒转吧 ，扑克牌</div>
</div>
</body>

<style type="text/css">
#allcard{
    width:400px;
    height:400px;
    margin:150px auto 50px;
    
    perspective:800px;
    perspective-origin:50% 50%;
    transform-style:preserve-3d;
    
    -webkit-perspective:800px;
    -webkit-perspective-origin:50% 50%;
    -webkit-transform-style:preserve-3d;
    
    position:relative;
    overflow:hidden;
    }
.card{
    width:360px;
    height:360px;
    padding:20px;
    background:#000;
    position:absolute;
    font-size:360px;
    color:#FFF;
    text-align:center;
    line-height:360px;
    }
    
#op{
    width:260px;
    margin:0 auto;
    }
.bott{
    width:120px;
    height:50px;
    margin-right:10px;
    background:#000;
    color:#FFF;
    text-align:center;
    line-height:50px;
    cursor:pointer;
    float:left;
    }
#card1{
    transform:rotateX(0deg);
    transform-origin:bottom;
    -moz-transition:transform 1s linear;
    
    -webkit-transform:rotateX(0deg);
    -webkit-transform-origin:bottom;
    -webkit-transition:transform 1s linear;
    }
#card2,#card3,#card4,#card5,#card6{
    transform:rotateX(90deg);
    transform-origin:bottom;
    -moz-transition:transform 1s linear;
    
    -webkit-transform:rotateX(90deg);
    -webkit-transform-origin:bottom;
    -webkit-transition:transform 1s linear;
    }
</style>

<script type="text/javascript">
window.onload = function(){
    before();
    after();
    }
    
    var index = 1;
    
    function before(){
        
        var c = document.getElementById('bott1');
        c.onclick = function(){
            if( index == 6){ return;}
            
            var a = document.getElementById('card'+index);
            a.style.transform = "rotateX(-90deg)"
            a.style.webkitTransform = "rotateX(-90deg)"
            
            index++;
            
            var b = document.getElementById('card'+index);
            b.style.transform = "rotateX(0deg)"
            b.style.webkitTransform = "rotateX(0deg)"
            }
        }
            
        function after(){
        
        var c = document.getElementById('bott2');
        c.onclick = function(){
            if( index == 1){ return;}
            
            var a = document.getElementById('card'+index);
            a.style.transform = "rotateX(90deg)"
            a.style.webkitTransform = "rotateX(90deg)"
            
            index--;
            
            var b = document.getElementById('card'+index);
            b.style.transform = "rotateX(0deg)"
            b.style.webkitTransform = "rotateX(0deg)"
            }
        }
</script>

在火狐浏览器测试的，翻转的效果是有的，但是发现了些问题。

就是文字先翻转然后再到整个块再翻转，显然就是不是同步的。

倒转的时候是整个块先倒转，然后文字再跟着倒转，显然也是不同步的。

请问这是怎么回事呢？

还有就是在谷歌浏览器出现的问题

跟火狐浏览器翻转的方向不同的