많은 기능 중 하나의 트윈을 하나의 기능으로 유지 (TweenMax JS)

Question

"3D 카드 뒤집기 효과"가 필요한 사이트에서 작업 중입니다. 이미 TweenMax를 사용하여 사이트의 특정 그래픽을 애니메이션으로 만들었으므로 3D 카드 뒤집기에 TweenMax를 사용할 것이라고 생각했습니다.

나는 이것을 가지고있다. 기본적으로 hover 상태로 확장되고 회전합니다. 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; 
      } 
     } 
    }