Question

我在一个需要“3D卡片翻转效果”的网站上工作。我已经在使用TweenMax为网站上的某些图形设置动画，所以我想我会使用TweenMax进行3D卡翻转。

我有这个。基本上它会在悬停状态下向上扩展和旋转。我希望它在保持rotationY属性的同时向上扩展，旋转和缩小。任何想法如何做到这一点？

$('#selector').on('mouseover', cardFlip).on('mouseout', cardFlipBack);

function cardFlip(e) {
    var tar = $(e.currentTarget);
    $(e.currentTarget).css("z-index", "210");
    TweenMax.to(tar, 0.25, {css: {scale: 1.5, rotationY: -180}});
}

function cardFlipBack(e) {
    var tar = $(e.currentTarget);
    TweenMax.to(tar, 0.25, {css: {scale: 1, rotationY: 0}});
}

Answer 1

我搞定了！当您将鼠标悬停在图像上时，它会在您鼠标移开时向下和向上缩放。单击对象时，卡片会向上缩放，翻转180度并保持在那里直到再次单击它，然后它会恢复到原始的程度和比例。

var cardFlipClick = false;

$('#include-why').on('mouseover', hoverin).on('mouseout', hoverout).on('click', cardFlip);

function cardFlip(e) { // MAKES CARD FLIP WORK
    if('click') {
        if (!cardFlipClick) {
            console.log('flipCard1 CLICKED!');
            var card = $(e.currentTarget).off('mouseout').off('mouseover').css("z-index", "210");
            TweenMax.to(card, 0.4, {css: {rotationY: -180, scale: 1.5}});
            cardFlipClick = true;
        } else if (cardFlipClick) {
            var card = $(e.currentTarget).on('mouseout', hoverout).on('mouseover', hoverin);
            console.log('flipCard2 CLICKED!');
            TweenMax.to(card, 0.4, {css: {rotationY: 0, scale: 1}});
            cardFlipClick = false;
            }
        }
    }

在一个函数中保留一个补间中的一个补间（TweenMax JS）

1 个答案: