Jquery TweenMax翻转卡
我今天刚听说了GSAP,玩了6个小时(顺便说一句,这真是太棒了!)除了我想翻牌的时候,它的背面没有出现,我在网上搜索过一个有同样问题的帖子,但结果却没有运气 通过检查元素,我认为问题在于当Jquery TweenMax翻转卡,jquery,css,gsap,card-flip,Jquery,Css,Gsap,Card Flip,我今天刚听说了GSAP,玩了6个小时(顺便说一句,这真是太棒了!)除了我想翻牌的时候,它的背面没有出现,我在网上搜索过一个有同样问题的帖子,但结果却没有运气 通过检查元素,我认为问题在于当#testCard旋转时,子div(#front和#back)没有旋转,浏览器认为显示的是#front的面,但我不知道如何解决它 看一看,点击框,看看问题 以下是我使用的代码: HTML: <div id="flipContainer"> <div id="testCard">
#testCard
旋转时,子div(#front
和#back
)没有旋转,浏览器认为显示的是#front
的面,但我不知道如何解决它
看一看,点击框,看看问题
以下是我使用的代码:
HTML:
<div id="flipContainer">
<div id="testCard">
<div id="front">Front</div>
<div id="back">Back</div>
</div>
</div>
#flipContainer{
width:200px;
height:100px;
background-color:#EEE;
position:absolute;
top:100%;
left:50px;
margin-top:-150px;
z-index:99999999999999999999999999999;}
#testCard{
width:100%;
height:100%;
position:absolute;
cursor:pointer;
overflow:hidden;}
#testCard div {
display: block;
position: absolute;
width: 100%;
height: 100%;}
#front{
background-color:#F00;}
#back{
background-color:#00F;}
jQuery:(JS)
由于在玩了几个小时之后没有人回答这个问题,我发现这个问题是因为我给了
#testCard
一个CSS属性,溢出:隐藏代码>,我删除了它,它按预期工作
TweenMax.set('#flipContainer, #testCard',{
perspective:1000
});
TweenMax.set($('#testCard'),{
boxShadow:'0 0 10px #000',
borderRadius:'10px',
transformStyle:'preserve-3d',
transformOrigin:'center center 50'
});
TweenMax.set('#testCard div',{
backfaceVisibility:'hidden'
});
TweenMax.set('#back',{
rotationY:-180
});
TweenMax.set($('#flipContainer'),{
borderRadius:'10px'
});
var flipped=false;
$('#testCard').click(function(){
if(!flipped){
TweenMax.to($(this),1,{
rotationY:180,
onComplete:function(){
flipped=true;
}
});
}
else{
TweenMax.to($(this),1,{
rotationY:0,
onComplete:function(){
flipped=false;
}
});
}
});