100일 CSS 챌린지 #14 : 바이시클롭터

문제

https://100dayscss.com/days/14/

 

Byciclopter: Which side of the card do you want to use? Either drive or fly to work in the morning?
바이시클롭터: 카드의 어느 면을 사용하시겠습니까? 아침에 운전하거나 비행기를 타고 출근하시겠습니까?

 

내 풀이

See the Pen 014 - Byciclopter by dobbyjang0 (@dobbyjang0) on CodePen.

transform-style: preserve-3d;

요소들을 3d로 랜더링한다.

 

perspective: 800px;

 rotateX시 깊이감을 추가해줌

 

backface-visibility: hidden;

180deg 돌아서 뒷면일 때 보이지 않게 함. 카드 뒷면을 가리는 용도.

 

예시 모범답안

See the Pen 014 - Byciclopter by Matthias Martin (@roydigerhund) on CodePen.