[CSS3]카드를 한장만 뒤집을 수 있는 카드 뒤집기 효과 구현하기

카드의 앞면과 뒷면을 겹쳐두고 rotate를 위용해 뒤집는것처럼 보이게 합니다.

 

뒷면은 처음부터 90도 돌려져있고 앞면이 90도 돌아가고 난 후 뒷면이 다시 90도 되돌아오면 뒤집어 지는것처럼 보입니다.

 

하나를 뒤집으면 뒤집어져있던 다른 카드는 다시 되돌아오도록 합니다. 

 

 

이때 다시 원위치로 되돌아오는 카드는 전체적으로 뒤면이 돌고 다시 앞면이 돌아나오는것이 아닌

뒷면이 없어지고 앞면이 돌아서 나오는듯하도록 구현합니다.