앞 뒤 돌리는 효과

hover시 앞 뒤 돌아가는 효과를 볼 수 있다.

<div class="container">
    <div class="item box1">앞</div>
    <div class="item box2">뒤</div>
</div>

container 클래스를 가지고 있는 부모요소와 item/box클래스를 가진 자식요소를 만들어준다

.container{
  width:100px;
  height:100px;
  background-color:pink;
  perspective:300px;   //원근법을 이용해 애니메이션효과를 줌 
}

//containter에 마우스를 hover할 경우
.container:hover .box1{
  transform:rotateY(180deg);  //앞에 있던 box1은 뒤로 위치하게 하고,
}

.container:hover .box2{
  transform:rotateY(0deg);   //뒤에 있던 box2는 앞으로 위치하는 효과를 준다
}

.container .item{
  font-size:40px;
  width:100px;
  height:100px;
  border:4px solid red;
  box-sizing:border-box;
  transition:2s;
  **backface-visibility: hidden;**  //뒤에보이지 않는 효과
}
//자식요소에 공동으로 들어가는 부분을 item css에 작성해준다

.box1{
  position:absolute;   
  //부모요소를 기준으로 위치를 주어 서로 박스가 겹쳐지게 해준다
  transform:rotateY(0deg);
}

.box2{
  transform: rotateY(-180deg);  //y축을 기준으로 뒤로 돌아가있도록 해준다
}