[HTML, CSS] 3D 애니메이션

* JavaScript 없이 HTML, CSS로만 3D 애니메이션 사용하기!

- 아이콘이 hover되면 한 바퀴 돌아가는 애니메이션 만들기

- 완성본: https://codepen.io/daoocadq/pen/ExZxGqJ

-HTML-
<div class="container">
  <div class="item front">앞</div>
  <div class="item back">뒤</div>
</div>

-CSS-
body {
  padding: 50px;
}
.container {
  width: 100px;
  height: 100px;
  perspective: 300px;
}
.container .item {
  width: 100px;
  height: 100px;
  border: 4px solid red;
  box-sizing: border-box;
  font-size: 60px;
  backface-visibility: hidden;
  transition: 1s;
}
.container .item.front {
  position: absolute;
  transform: rotateY(0deg);
}
.container:hover .item.front {
  transform: rotateY(180deg);
}
.container .item.back {
  transform: rotateY(-180deg);
}
.container:hover .item.back {
  transform: rotateY(0deg);
}