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

How to make a flip card working in IE using TweenMax?

本文关键字：翻转 IE 何使用 TweenMax      更新时间：2023-09-26

我有以下卡片翻转，但在IE中它会显示背面为正面，但上下颠倒。知道怎么解决这个问题吗?

这是我的JSFiddlehttps://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;
                    }
                });
            }
        });
});

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工作。

相关文章：