3D리플릿 만들기 - 인터랙티브 웹 프로젝트
3D리플릿 만들기 - 인터랙티브 웹 프로젝트
수강정보
(9개의 수강평)
170명의 수강생
16,500원
지식공유자 : 1분코딩
15회 수업 · 총 1시간 40분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 중급이상
김동 프로필

선생님 질문잇습니다. ㅠ 김동 13일 전
백페이스 히든 줘도 각도를 돌리면 그 뒷면이보이는건가요? 백페이스 자체가 뒷면만 안보이게 하는속성인가요 ㅠ? 백페이스를 안주고 preserve-3d만 주어도 눈에 보이기에는 똑같아 보이는데 따로 꼭줘야 되는 속성인가요 ㅠ?

1
kha2858 프로필

줌인이 왜 안되는지를 모르겠어요.. kha2858 20일 전
(() => { const leaflet = document.querySelector(".leaflet"); const pageElems = document.querySelectorAll(".page"); let pageCount = 0; function getTarget(elem, className){ //부모노드까지 위임 while(!elem.classList.contains(className)){ elem = elem.parentNode; if(elem.nodeName =='BODY'){ elem = null; return; } } return elem; } function closeLeaflet(){ pageCount=0; document.body.classList.remove('leaflet-opened'); pageElems[2].classList.remove('page-flipped'); setTimeout(() => { pageElems[0].classList.remove('page-flipped'); },500); } function zoomIn(elem){ const rect = elem.getBoundingClientRect(); const dx = window.innerWidth/2 - (rect.x + rect.width/2); const dy = window.innerHeight/2 - (rect.y + rect.height/2); let angle; switch(elem.parentNode.parentNode.parentNode.dataset.page*1){ case 1: angle = -30; break; case 2: angle = 0; break; case 3: angle =30; break; } console.log(elem.parentNode.parentNode.parentNode.dataset.page); leaflet.style.transform = `translate3d(${dx}px, ${dy}px, 50vw) rotateY(${angle}deg)`; } leaflet.addEventListener('click',e =>{ let pageElem = getTarget(e.target, 'page'); if(pageElem){ pageElem.classList.add('page-flipped'); pageCount++; if(pageCount ==2){ document.body.classList.add('leaflet-opened'); } } let closeBtnElem = getTarget(e.target, 'close-btn'); if(closeBtnElem){ closeLeaflet(); } let menuItemElem = getTarget(e.target, 'menu-item'); if(menuItemElem){ zoomIn(menuItemElem); } }); })();

1
김 코딩왕 김챡씨 프로필

질문이 있어요 김 코딩왕 김챡씨 22일 전
각 페이지마다 transform-style: preserve-3d로 설정해주면 .page-face의 backface-visibility : hidden이 없어도 앞, 뒷면 확인이 잘 되니까 backface-visibility : hidden 을 넣어야하는지 잘 모르겠어요.. ㅠㅠ 

1
정우진 프로필

질문 있습니다. 정우진 1달 전
body에 perspective를 주었고 leaflet에 preserve-3d를 아직 해주지 않았는데 어떻게 page는 rotateY의 3d 효과가 적용된건가요?? body의 perspective효과가 html태그 단계를 거치면 적용이 안된다고 하셨는데  page는 왜 leaflet에 preserve-3d를 해주기도 전에 rotateY의 3d효과가 적용될수 있었는지 궁금합니다.

2
개발자 프로필

선생님 질문 있습니다! 개발자 1달 전
안녕하세요 궁금한점이 있어서 질문 드립니다 ㅠ.. 제가 지금까지 선생님 강의를 봐왔을시에는, 항상 부모 태그에 position: relative 를 적용 해 주신다음, 자식 태그에 position:absolute를 써주신 걸로 알고 있습니다. 하지만 이번에는 부모 tag에 바로 absolute를 써주신 이유가 궁금합니다. 제가  relative 를 적용하고, 써 보았는데, 가로는 정렬 되는데 세로는 안되더라구요.  정렬의 위함때문 인건가요?

2
송지훈 프로필

쌤 화면 크기 줄엿을때 글자들 삐져나오는거는 어떻게 해결하죠? 송지훈 4달 전
화면 줄이면 이렇게 글자들이 삐져나오는걸 해결을 못하고 잇어요 ㅠㅠ 일단은 혼자서 해결해보도록 하겟습니다!! 강의 감사해요~ 아 그리고 해결하고싶은 문제들이 몇가지 더 있는데 예를들어 줌인 상태에서 다른 곳 클릭하면 화면이 완전히 다른곳으로 전환되는 것들은 지금은 제가 혼자 해결해보겠습니다. 제가 이강의를 여러번 돌려보면서 공부할거라서 나중에 정 모르겟으면 그때  질문할게요~ 감사해요~~

2
조재영 프로필

소스코드 압축이 풀리지 않습니다. 조재영 5달 전
반디집으로 풀었는데 파일 압축이 풀리지 않아 소스코드를 볼수가 없습니다. 혹시 파일을 메일로 받을수 있는지 여쭤봅니다. damanegi1979@naver.com  입니다. 수고하세요~

4
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스