[애니메이션] 앞뒤회전

html

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

css

.wrapper {
  position: relative;
  width: min-content;
  height: min-content;
  perspective: 300px; /* 원근법 적용 */
}
.wrapper .item {
  width: 100px;
  height: 100px;
  border: 4px solid red;
  box-sizing: border-box;
  font-size: 60px;
  backface-visibility: hidden; /* 뒤집어진 요소 숨기기 */
  transition: 1s;
}
.wrapper .item.front {
  position: absolute;
  transform: rotateY(0deg);
}
.wrapper:hover .item.front {
  transform: rotateY(180deg);
}
.wrapper .item.back {
  transform: rotateY(-180deg);
}
.wrapper:hover .item.back {
  transform: rotateY(0deg);
}