0

「3D カード フリップ効果」を必要とするサイトに取り組んでいます。私はすでに TweenMax を使用してサイトの特定のグラフィックスをアニメーション化しているので、3D カード フリップには TweenMax を使用することにしました。

私はこれを持っています。基本的にホバー状態で拡大・回転します。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 に答える