Сохраните одну анимацию из одной функции (TweenMax JS)

Question

Im работает над сайтом, для которого требуется «эффект флеш-карты 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; 
      } 
     } 
    }