<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">翻轉(zhuǎn)吧?，撲克牌</div>
<div?class="bott"?id="bott2">倒轉(zhuǎn)吧?，撲克牌</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>在火狐瀏覽器測試的，翻轉(zhuǎn)的效果是有的，但是發(fā)現(xiàn)了些問題。就是文字先翻轉(zhuǎn)然后再到整個(gè)塊再翻轉(zhuǎn)，顯然就是不是同步的。倒轉(zhuǎn)的時(shí)候是整個(gè)塊先倒轉(zhuǎn)，然后文字再跟著倒轉(zhuǎn)，顯然也是不同步的。請問這是怎么回事呢？還有就是在谷歌瀏覽器出現(xiàn)的問題跟火狐瀏覽器翻轉(zhuǎn)的方向不同的上面的是火狐瀏覽器的下面的是谷歌瀏覽器的，360瀏覽器也是這樣
用CSS3+JS實(shí)現(xiàn)翻轉(zhuǎn)效果，出現(xiàn)的問題有些不解。
手刃情人
2016-05-14 00:40:55
