[CSS] 카드 뒤집기

<div class="itemWrap">
	<div class="item front">앞</div>
	<div class="item back">뒤</div>
</div>

.item {
  backface-visibility: hidden; /* 뒷면 보이지 않게 */
  transition: 1s; /* 1초동안 실행 */
  position: absolute; /* front, back 겹칠수 있도록 */
  width: 300px;
  height: 500px;
}

.itemWrap .item.front {
  background-color: orange;
  transform: rotateY(0deg); /* 생략가능 */
}
.itemWrap:hover .item.front {
  transform: rotateY(180deg); /* 마우스 오버시 y축 기준으로 180도 회전 */
}

.itemWrap .item.back {
  background-color: yellow;
  transform: rotateY(-180deg);
}
.itemWrap:hover .item.back {
  transform: rotateY(0deg);
}