<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>在火狐浏览器测试的，翻转的效果是有的，但是发现了些问题。就是文字先翻转然后再到整个块再翻转，显然就是不是同步的。倒转的时候是整个块先倒转，然后文字再跟着倒转，显然也是不同步的。请问这是怎么回事呢？还有就是在谷歌浏览器出现的问题跟火狐浏览器翻转的方向不同的上面的是火狐浏览器的下面的是谷歌浏览器的，360浏览器也是这样
添加回答
举报
0/150
提交
取消