See the Pen 3D animation(동전뒤집기) by Cheol-bae Lee (@cheolship) on CodePen.
요점.
1. position: absolute 는 단지 float과 같은 역할을 한다는 점.
2. 뒷면을 가려주는 backface-visibility: hidden; 속성
3. 원근감을 주는 perspective 속성
4. 'Y축을 기준'으로 회전 시켜주는 transform: rotateY(deg); 속성
+ <자주 헷갈리는 요소 위치 조절>
position:absolute로 좌우(또는 상하) 가운데 정렬을 할 때 left right 각각 0으로 시작점을 잡아주고 margin: auto를 줘야한다.
이때 정렬하는 요소는 width 값이 지정돼있어야한다.
'TIL > CSS' 카테고리의 다른 글
| [CSS] Grid (2) | 2022.10.05 |
|---|---|
| [CSS] card-list 만들기 (flex) (1) | 2022.10.04 |
| [CSS] 썸네일과 텍스트 리스트 (이미지 처리 팁😼) (0) | 2022.09.28 |
| [CSS] Flex (1) | 2022.09.28 |
| [CSS] 유체 그리드(반응형) 페이지 개념 (0) | 2022.09.22 |