이 글은 인프런에서 1분코딩님의 '인터랙티브 웹 개발 제대로 시작하기' 강의를 듣고 정리한 글입니다.
인터랙티브 웹 개발 제대로 시작하기 - 인프런
크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다. 초급 웹 개발 UX/UI 프로그래밍 언어 Front-End HTML/CSS Javascript 웹 퍼블리싱 웹 개발 UX/UI 인터랙티브
www.inflearn.com
See the Pen NWGQeyL by mungyeung (@mungyeung) on CodePen.
핵심 흐름
1. 앞면과 뒤면에도 3D가 적용될 수 있도록 앞면과 뒤면을 감싸고 있는 카드에 transform-style: preserve-3d;를 적용시킨다. (perspective는 자신의 직계자식에게만 3D공간을 허용하므로)
2. 뒤면은 먼저 180도 돌려놓는다. (카드를 180도 돌렸을 때 똑바로 보일 수 있도록)
3. backface-visibility: hidden;을 사용해서 뒷면(앞면과 뒷면의 뒷면)이 보이지 않게 만든다. (브라우저 환경에 따라 없어도 동작할 수 있지만 안전하게 넣어준다.)