1) 학습내용

애니메이션이 들어가있는 것을 만들어보는게 목표

transform: rotateY(180deg);

• 요소를 Y(세로)축을 기준으로 회전시킵니다.
  perspective: 1100px;
• 보고 있는 요쇼의 위치를 추정하여 원근감으로 3D 환경을 만듭니다.
• 3D transform와 같이 자주 사용됩니다.
  backface-visibility: hidden;
• 요소의 뒷면을 보여줄 지 결정 (rotateY 180deg는 뒷면을 향하게 됨)

rotateY 속성을 이용하여 뒷면 요소를 초기에 뒷쪽(180deg)으로 뒤집어주고, backface-visibility의 hidden 속성으로

뒷면 요소가 보이지 않게 해줍니다. (해당 속성이 없으면 그냥 뒷면으로 뒷집기만 하게 됨)

그 후 특정 이벤트에 앞면, 뒷면을 감싼 요소에 rotateY 속성을 이용하여 앞면과 뒷면을 한번에 뒤집어 줍니다.

이 때 flip이란 요소로 한번 더 감싼 이유가 나오는데, 모든 면을 감싼 요소 자체에 호버 효과를 주면 원근감 효과 때문에

입체적으로 뒤집힐 때 해당 요소가 예상범위를 벗어나면서 호버 상태가 끊기게 됩니다.

오류

하다보니 가로로 정렬이되어야하는데 세로로 정렬이되어버렸다

아마도 css에 Display: flex 을 쓴게 문제인것 같다..

2) 어려웠던점

가로로 정렬이되어야하는데 세로로 정렬이 되어서 코드가 꼬임

3) 해결방법

해결중...

4)소감

오늘 팀프로젝트 첫날이었는데 팀에 도움이 하나도 되지못한것 같다..ㅜㅜ 더 노력을 해야할거 같다..