퍼블리싱-3

rotateX,Y , perspective

3D animation - 동전의 앞면과 뒷면 구현하기

 <section class="container">
    <div class="container--inner">
      <div class="coin">
        <div class="coin__front">앞</div>
        <div class="coin__back">뒤</div>
      </div>
    </div>
  </section>

.container .container--inner{
  /* height로 부모 컨테이너의 크기 설정 */
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .coin{
/* coin과 coin__front,coin__back 너비를 같게 만든다.  */ 
  width:334px;
  height: 334px;
  /* 3D 효과를 어느 지점에서 관찰하겠다는 거리 설정 */
  /* 바뀌는 대상의 부모요소에 적용한다는 점에 주의 */
  perspective: 600px;
}
/* 앞면과 뒷면의 공통적인 요소 */
.container .coin .coin__front,
.container .coin .coin__back{
  position:absolute;
  width: 334px;
  height: 334px;
  /* 아래 속성을 통해 뒷면(rotateY가 180도 돌아간 상황)일 때 hidden처리가 가능하다. */
  backface-visibility: hidden;
  transition: all .8s;
}
/* 초기 앞면의 rotateY 상태. 0deg는 앞면이 보이는 상태이다 */
.container .coin .coin__front{
  transform: rotateY(0deg);
}
/* 부모 요소가 hover상태라면 앞면이 Y축을 기준으로 180도 회전하게 한다 */
.container .coin:hover .coin__front{
  transform: rotateY(180deg);
}
/* 초기 뒷면의 rotateY상태. -180,180 모두 뒷면이 보이는 상태이다. */
.container .coin .coin__back{
  transform: rotateY(-180deg);
}
/* 부모 요소가 hover상태라면 뒷면이 Y축을 기준으로 180도 회전하게 한다 */
.container .coin:hover .coin__back{
  transform: rotateY(0deg);
}