뒤집히는 이미지 만들기 (transform-style, backface-visibility)

[코딩애플 HTML/CSS All-in-one] 강의 수강 후 배운 것을 정리한 것입니다.
https://codingapple.com/course/html-basics/

 

 

 

See the Pen flip by JEONG (@cona) on CodePen.

 

이미지를 감싸는 div태그

transform-style : preserve-3d;  /*3D로 보여줌*/

 

이미지

backface-visibility :hidden;  /*뒷면(text)을 보여줄때는 앞면이 보이지않도록 함*/

z-index :1 ;                            /*이미지 앞면을 보여줄때는 뒷면이 보이지않도록 이미지를 z-index 우선순위 줌*/