[css 애니메이션] 3D 애니메이션 - 동전 뒤집기 효과

요점.

1. position: absolute 는 단지 float과 같은 역할을 한다는 점.

2. 뒷면을 가려주는 backface-visibility: hidden; 속성

3. 원근감을 주는 perspective 속성

4. 'Y축을 기준'으로 회전 시켜주는 transform: rotateY(deg); 속성

 

+ <자주 헷갈리는 요소 위치 조절>

position:absolute로 좌우(또는 상하) 가운데 정렬을 할 때 left right 각각 0으로 시작점을 잡아주고 margin: auto를 줘야한다.

이때 정렬하는 요소는 width 값이 지정돼있어야한다.