0

我在一个需要“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}});
}
4

1 回答 1

0

我让它工作了！当您将鼠标悬停在图像上时，它会在您“鼠标移出”时缩小和放大。当您单击对象时，卡片会放大，翻转 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;
            }
        }
    }
于 2013-08-06T14:58:40.630 回答