[Web] Flip효과 만들기

 

 

이런거 만들어보자.

Flip이라고 한다.

자세한 내용은 https://www.w3schools.com/howto/howto_css_flip_card.asp 여기를 참고하면 된다.

대신 영어를 잘해야함.

 

---

 

See the Pen flip by Jirong (@jirongkim) on CodePen.

안정적으로 애니메이션을 작동시키기 위해서는 가장 바깥쪽에 outer-wrap이 꼭 필요하다.

이게 없으면 돌아가다가 말고 이런 이상한 동작 함.

 

transform-style: preserve-3d를 이용하면 요소를 3d처럼 표현할 수 있게 된다.

이렇게 화면을 앞, 뒤로 구성하고, 뒤집을 수 있는 이유이다.

 

backface-visibility: hidden; 으로 앞, 뒤 화면이 동시에 보이는 현상을 잡을 수 있다.