Tạo tờ rơi 3D - Dự án web tương tác
Dự án Web Tương tác là một loạt bài trong đó bạn tạo các ví dụ về các tương tác sáng tạo bằng cách sử dụng CSS và JavaScript.
756 học viên
Độ khó Trung cấp trở lên
Thời gian Không giới hạn

- Chưa giải quyết
transform-style: preserve-3d; 를 추가하면
.page:nth-child(2) 에 .back-btn 버튼이 눌리지 않아, 원본 코드를 보니 .page-face 에 transform-style: preserve-3d; 가 추가 되어 있어서 적용했습니다. 그런데,
HTML/CSSjavascript인터랙티브-웹goldenparachute3422
・
4 tháng trước
0
38
1
- Chưa giải quyết
Babel의 사용법 아래 링크의 영상이 비공개 동영상이라고 뜹니다.
비공개 영상인데, 어떻게 영상을 볼 수 있나요?
HTML/CSSjavascript인터랙티브-웹14212424
・
0
96
1
- Chưa giải quyết
페이지 클래스리스트 제거 해줬을때
(() => { const leaflet = document.querySelector('.leaflet'); const pagesElem = document.querySelector('.pa
HTML/CSSjavascript인터랙티브-웹samkookji120994
・
0
81
0
- Chưa giải quyết
페이지를 클릭할 때 Uncaught TypeError: Cannot read properties of undefined (reading 'contains') 에러가 뜹니다.
<img src="https://cdn.inflearn.com/public/fil
HTML/CSSjavascript인터랙티브-웹jayscodinggarden
・
0
1,011
1
- Chưa giải quyết
질문 있습니다ㅠ.ㅠ..
지금 1, 3번은 back-btn이 제대로 포커스가 되는데 2번만 계속 page-face가 잡혀요..어떤 이유 때문일까요8ㅅ8
HTML/CSSjavascript인터랙티브-웹hong00412
・
0
401
1
- Chưa giải quyết
클릭 시 자꾸 page element만 인식됩니다.
위 화면에서 BackBtn이 인식이 되지 않고 Page el
HTML/CSS인터랙티브-웹javascriptmax4761max1733
・
0
225
1
- Chưa giải quyết
가운데 페이지만 줌인이 됩니다
양 옆 페이지의 요소들을 클릭해도 줌인이 안되고, 가운데 페이지의 요소만 줌인이 됩니다. 왜 그런지 모르겠어요... 올려주신 소스코드에서 그대로 해도 양 옆은 줌인이 되지 않습니다. 파이어폭스에서는 작동하는데 이미지가 표시되지 않습니다 <pre class=
질문javascriptHTML/CSS인터랙티브-웹haejin
・
0
253
1
- Chưa giải quyết
body에 perspective를 주면 갑자기 html과 body 높이가 0이 됩니다
body에 perspective를 주면 html, body가 높이가 0이 되어서 일단 body에 100vh 주긴 했는데.. 왜 강의와는 다르게 적용되는 걸까요?
javascript인터랙티브-웹HTML/CSSdotdot
・
0
393
1
- Chưa giải quyết
줌인 상태일 때
줌인 상태일 때, current-menu 클래스가 추가된 menu-item 외에 다른 menu-item을 누르면 leaflet 의 위치가 바뀌면서 틀이 틀어지는 이슈가 생겼습니다. current-menu 클래스가 메뉴 중 1개라도 추가가
javascriptHTML/CSS인터랙티브-웹leh87671680
・
0
258
1
- Chưa giải quyết
이벤트 위임 방식 질문
이벤트 위임 방식으로 하게되면 현재 2F를 감싸는 page 에도 page-flipped 클래스가 추가가 됩니다. 2F를 감싸는 page 에는 page-flipped 클래스가 추가가 되지 않게 하려면 data- 속성을 이용해 적용
HTML/CSSjavascript인터랙티브-웹leh87671680
・
0
219
1
- Chưa giải quyết
이사람 누군지 아세요..?
누구지.... 왜 물어 보지.... :0 몰라서 구글링 해 보았어요. <img src="https://cdn.inflearn.com/public/files/posts/3598ce1d-8207-405d-bc6a-db3e73cd09e0/who
인터랙티브-웹javascriptHTML/CSScookatrice
・
3
409
1
- Chưa giải quyết
선생님 질문있습니다 이 강의를 리액트환경에서 적용하고싶은데요,
그럴경우 useEffect 안에서 함수 처리를 해줘야할까요? 예를들어 이런식으로? <div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier Ne
HTML/CSSjavascript인터랙티브-웹wndtlr10248980
・
0
276
1
- Chưa giải quyết
질문있습니다.
forwards 를 작성안해줘도 애니메이션이 제대로 동작하는데요. 어떤 현상 때문에 적용을 하신것인지 궁금합니다! 그리고 menu-item을 클릭하혀 줌인이 되었을때 다른곳을 클릭하면 레이아웃(?)이 다른데로 이동되는현상이있는데요 이런경우
인터랙티브-웹javascriptHTML/CSSwndtlr10248980
・
0
199
1
- Chưa giải quyết
선생님 질문잇습니다. ㅠ
백페이스 히든 줘도 각도를 돌리면 그 뒷면이보이는건가요? 백페이스 자체가 뒷면만 안보이게 하는속성인가요 ㅠ? 백페이스를 안주고 preserve-3d만 주어도 눈에 보이기에는 똑같아 보이는데 따로 꼭줘야 되는 속성인가요 ㅠ?
HTML/CSS인터랙티브-웹javascriptdbstjdgy61339
・
0
262
1
- Chưa giải quyết
줌인이 왜 안되는지를 모르겠어요..
(() => { const leaflet = document.querySelector(".leaflet"); const pageElems = document.querySelecto
HTML/CSSjavascript인터랙티브-웹kha28581520
・
1
260
1
- Chưa giải quyết
질문이 있어요
각 페이지마다 transform-style: preserve-3d로 설정해주면 .page-face의 backface-visibility : hidden이 없어도 앞, 뒷면 확인이 잘 되니까 backface-visibility : hidde
HTML/CSS인터랙티브-웹javascriptgcy
・
1
240
1
- Chưa giải quyết
질문 있습니다.
body에 perspective를 주었고 leaflet에 preserve-3d를 아직 해주지 않았는데 어떻게 page는 rotateY의 3d 효과가 적용된건가요?? body의 perspective효과가 html태그 단계를 거치면 적용이 안된다고 하셨는
javascript인터랙티브-웹HTML/CSSxf6a4or71284
・
0
362
2
- Chưa giải quyết
선생님 질문 있습니다!
안녕하세요 궁금한점이 있어서 질문 드립니다 ㅠ.. 제가 지금까지 선생님 강의를 봐왔을시에는, 항상 부모 태그에 position: relative 를 적용 해 주신다음, 자식 태그에 position:absolute를 써주신 걸로 알고 있습니다.
인터랙티브-웹javascriptHTML/CSSrlfalstlr061198
・
1
254
2
- Chưa giải quyết
쌤 화면 크기 줄엿을때 글자들 삐져나오는거는 어떻게 해결하죠?
<img src="https://cdn.inflearn.com/public/files/posts/94a31273-9563-4e88-9dd7-32b97cd3b3ca/주석 2020-05-27 161619.png" title="주석 2020-05-27 161619.pn
javascriptHTML/CSS인터랙티브-웹thdwlgnsl1225
・
0
381
2
- Chưa giải quyết
소스코드 압축이 풀리지 않습니다.
반디집으로 풀었는데 파일 압축이 풀리지 않아 소스코드를 볼수가 없습니다. 혹시 파일을 메일로 받을수 있는지 여쭤봅니다. damanegi1979@naver.com 입니다. 수고하세요~
javascriptHTML/CSS인터랙티브-웹damanegi19792756
・
0
320
4

