[英]TweenMax Flip Card
我今天剛剛聽說過GSAP並玩了6個小時(順便說一句真棒!)我把所有的工作都搞定了,除非我要翻卡,它的背面沒有出現,我已經在網上尋找有同樣問題的帖子,但卻沒有運氣。
通過檢查元素,我認為問題在於,當#testCard
旋轉時,子div( #front
和#back
)不會被旋轉,瀏覽器認為它是正在顯示的#front
的面孔,但我有不知道怎么解決它!
看看這個DEMO ,點擊方框,看看問題!
這是我用它的代碼:
HTML:
<div id="flipContainer">
<div id="testCard">
<div id="front">Front</div>
<div id="back">Back</div>
</div>
</div>
CSS:
#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)
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;
}
});
}
});
因為沒有人在玩了幾個小時后回答問題我發現問題是因為我給#testCard
的CSS屬性, overflow:hidden;
,我刪除它,它按預期工作!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.