如何使用TweenMax使翻转卡在IE中工作？

Question

我有以下卡片翻板，但是当它在IE中时，它会将背面显示为正面但是倒置。知道如何解决这个问题吗？

这是我的JSFiddle https://jsfiddle.net/qnwtLbzs/5/

$(document).ready(function(){
        TweenMax.set('#flipContainer, #testCard',{
        perspective:500
        });
    TweenMax.set($('#testCard'),{
        transformStyle:'preserve-3d'
        });
    TweenMax.set('#testCard div',{
        backfaceVisibility:'hidden'
        });
    TweenMax.set('#back',{
        rotationX:-180
        });

    var flipped=false;
    $('#testCard').click(function(){
        if(!flipped){
            TweenMax.to($(this),1,{
                rotationX:180,
                onComplete:function(){
                    flipped=true;
                    }
                });
        }
        else{
            TweenMax.to($(this),1,{
                rotationX:0,
                onComplete:function(){
                    flipped=false;
                    }
                });
            }
        });
});

Answer 1

demo

而不是在父容器上设置透视图，使用transformPerspective GSAP属性将其设置在移动div上，即#front和#back，该属性仅适用于动画元素，而不适用于父元素。同样的div应该旋转而不是#testCard

tl.to("#back",1,{rotationX:0}).to("#front",1,{rotationX:180},0)

我添加了一些类似位置的css：绝对按顺序将这些div叠加在一起，而不是彼此叠加。 我希望这可以在你的IE中工作。