TweenMax 翻转卡答案

【问题标题】：TweenMax Flip CardTweenMax 翻转卡
【发布时间】：2014-11-18 23:05:54
【问题描述】：

我今天刚听说 GSAP 并玩了大约 6 个小时（顺便说一句，这太棒了！）我得到了所有的工作，除了当我想翻转卡片时，它的背面没有出现，我在网上搜索了一个有同样问题但没有运气的帖子。

通过检查元素，我认为问题在于，当 #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;
                }
            });
        }
    });

【问题讨论】：

标签： jquery css gsap card-flip

【解决方案1】：

由于在玩了几个小时后没有人回答这个问题，我发现问题是因为我给#testCard，overflow:hidden; 提供的 CSS 属性，我删除了它，它按预期工作！

DEMO

【讨论】：