.container {
  width: 150px;
  height: 200px;
  border: 4px solid;
  perspective: 300px;
}

.container .item {
  width: 150px;
  height: 200px;
  background-color: orange;
  font-size: 60px;
  transition-duration: 1s;

  /* 요소의 뒷면을 보이게 설정하는 속성 */
  /* backface-visibility: visible; */
  
  /* 뒷면이 보이면 사라지는 설정 */
  backface-visibility: hidden;
}

.container .item.front {
  background-color: orange;
  position: absolute;
}

.container .item.back {
  background-color: royalblue;
  transform: rotateY(-180deg);
}

.container:hover .item.front {
  transform: rotateY(180deg);
}

.container:hover .item.back {
  transform: rotateY(0);
}