스타벅스 클론(11) - 3D 애니메이션

지난 편에 했던 거 처럼 스크롤을 해도 배경은 그대로 고정되어 있습니다.

그리고 가운에 로고에 마우스대면 3d애니메이션 효과가 나옵니다.

 

 

html 설명 안 하겠습니다.

우선 배경 이미지가 고정 되 있는 background-attachment과 size를 설정했습니다.

medal 요소를 가운데 정렬했습니다.

 

front를 180deg 돌리면 시각적으로 안 보여야 하며,

back은 처음부터 안 보이다가 180deg 돌아와서 보여야 합니다.

 

그래서 .front에 맨 처음에 0deg 설정하고, 마우스 데면 180deg를 돌리는 씩으로 했습니다.

back은 처음에 -180deg였다가, 마우스 데면 0deg로 돌아 옵니다.

 

둘 다 뒷면을 가려야 함으로 backface-visibility가 hidden여야 합니다.

 

모든 속성을 다 추가한 후 medal에 3d느낌있게 perspective 속성을 넣었습니다.

그리고 transition도 추가해서 좀 더 자연스럽게 진행해보았습니다.