[NOJS] 3D 캐러셀 슬라이드 만들기

1. 완성본 완성 본 2. 설명 CSS로 3D를 만져보는것이 익숙하지 않아 꽤나 애먹었다. HTML 구조는 다음과 같다. CSS 코드 중에 content 클래스안에 있는 내용을 주목할 필요가 있다. prospective는 3차원 위치 관점을 제공하기 위해, Z=0인 평면과 사용자 사이의 거리를 결정한다. 쉽게 말하면 원근법을 제공한다는 뜻이다. 값은 무조건 0, 양수 값이어야 한다. 그리고 padding-top 속성 값을 변화시켜 줄 때마다 위에서 보는 관점의 변화가 생겼는데, 왜 그런지는 모르겠다. 나머지는 읽어보면 어떤식으로 돌아가는지 이해할 수 있을 것이다. *{ box-sizing: border-box; } html{ font: 10px; } body{ margin: 0; padding: 0; w..

2020.12.13