3
我剛剛聽到關於GSAP今天玩了6個小時左右（這真是太棒了！）除了當我想翻轉卡時，它沒有出現，我在網上搜尋了所有尋找具有相同問題但沒有運氣的帖子。TweenMax翻轉卡
通過檢查的元素，我認爲這個問題是，當#testCard旋轉孩子的div（#front和#back）沒有得到旋轉和瀏覽器認爲它是#front所顯示的臉，但我有不知道如何解決它！
看看This 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;
}
});
}
});