javascript - 如何使用 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

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

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

我添加了一些 css，例如 position:absolute，以便这些 div 相互堆叠，而不是相互堆叠。我希望这会在您的 IE 中起作用。