【GSAP】フリップ演出を実装 CSSのみでも再現できるけども…【コピペOK！デモあり】

<section class="animation-area">
  <div class="wrapper">
    <div class="card">
      <div class="card__face card__face--front">front</div>
      <div class="card__face card__face--back">back</div>
    </div>
  </div>
</section>
<section class="animation-area">
  <div class="wrapper">
    <div class="card">
      <div class="card__face card__face--front">front</div>
      <div class="card__face card__face--back-2">back</div>
    </div>
  </div>
</section>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body,main,section{
    width: 100%;
}
.animation-area{
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wrapper {
	width: 200px;
	height: 260px;
	border: 1px solid #CCC;
	margin: 40px 0;
	perspective: 600px;
}

.card {
	width: 100%;
	height: 100%;
	transition: transform 1s;
	transform-style: preserve-3d;
	cursor: pointer;
	position: relative;
}

.card__face {
	position: absolute;
	width: 100%;
	height: 100%;
	line-height: 260px;
	color: white;
	text-align: center;
	font-weight: bold;
	font-size: 40px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  }

.card__face--front {
	background: crimson;
}
  
.card__face--back {
	background: cornflowerblue;
	transform: rotateY(180deg);
}

.card__face--back-2 {
	background: seagreen;
	transform: rotateX(180deg);
}

document.addEventListener('DOMContentLoaded', function() {

  var wrapper = document.getElementsByClassName('wrapper');
  wrapper[0].addEventListener('mouseover', ()=> {
    card = wrapper[0].querySelector('.card');
    gsap.to(card,{rotateY:180,duration:.1})
  });

  wrapper[0].addEventListener('mouseleave', ()=> {
    card = wrapper[0].querySelector('.card');
    gsap.to(card,{rotateY:0,duration:.1})
  });

  wrapper[1].addEventListener('mouseover', ()=> {
    card = wrapper[1].querySelector('.card');
    gsap.to(card,.1,{rotateX:180,duration:.1,ease:"bounce"})
  });

  wrapper[1].addEventListener('mouseleave', ()=> {
    ard = wrapper[1].querySelector('.card');
    gsap.to(card,.1,{rotateX:0,duration:.1,ease:"bounce"})
  });

})