3Dใชใผใใฌใใใฎไฝๆ - ใคใณใฟใฉใฏใใฃใWebใใญใธใงใฏใ
ใคใณใฟใฉใฏใใฃใWebใใญใธใงใฏใใฏใCSSใจJavaScriptใไฝฟใฃใฆๅต้ ็ใชใคใณใฟใฉใฏใทใงใณใฎใใไพใไธใคใใคไฝๆใใใทใชใผใบใงใใ
ๅ่ฌ็ 756ๅ
้ฃๆๅบฆ ไธญ็ดไปฅไธ
ๅ่ฌๆ้ ็กๅถ้

- ๆช่งฃๆฑบ
transform-style: preserve-3d; ๋ฅผ ์ถ๊ฐํ๋ฉด
.page:nth-child(2) ์ .back-btn ๋ฒํผ์ด ๋๋ฆฌ์ง ์์, ์๋ณธ ์ฝ๋๋ฅผ ๋ณด๋ .page-face ์ transform-style: preserve-3d; ๊ฐ ์ถ๊ฐ ๋์ด ์์ด์ ์ ์ฉํ์ต๋๋ค. ๊ทธ๋ฐ๋ฐ,
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นgoldenparachute3422
ใป
4ใถๆๅ
0
42
1
- ๆช่งฃๆฑบ
Babel์ ์ฌ์ฉ๋ฒ ์๋ ๋งํฌ์ ์์์ด ๋น๊ณต๊ฐ ๋์์์ด๋ผ๊ณ ๋น๋๋ค.
๋น๊ณต๊ฐ ์์์ธ๋ฐ, ์ด๋ป๊ฒ ์์์ ๋ณผ ์ ์๋์?
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์น14212424
ใป
0
107
1
- ๆช่งฃๆฑบ
ํ์ด์ง ํด๋์ค๋ฆฌ์คํธ ์ ๊ฑฐ ํด์คฌ์๋
(() => { const leaflet = document.querySelector('.leaflet'); const pagesElem = document.querySelector('.pa
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นsamkookji120994
ใป
0
89
0
- ๆช่งฃๆฑบ
ํ์ด์ง๋ฅผ ํด๋ฆญํ ๋ Uncaught TypeError: Cannot read properties of undefined (reading 'contains') ์๋ฌ๊ฐ ๋น๋๋ค.
<img src="https://cdn.inflearn.com/public/fil
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นjayscodinggarden
ใป
0
1,031
1
- ๆช่งฃๆฑบ
์ง๋ฌธ ์์ต๋๋คใ .ใ ..
์ง๊ธ 1, 3๋ฒ์ back-btn์ด ์ ๋๋ก ํฌ์ปค์ค๊ฐ ๋๋๋ฐ 2๋ฒ๋ง ๊ณ์ page-face๊ฐ ์กํ์..์ด๋ค ์ด์ ๋๋ฌธ์ผ๊น์8ใ 8
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นhong00412
ใป
0
406
1
- ๆช่งฃๆฑบ
ํด๋ฆญ ์ ์๊พธ page element๋ง ์ธ์๋ฉ๋๋ค.
์ ํ๋ฉด์์ BackBtn์ด ์ธ์์ด ๋์ง ์๊ณ Page el
HTML/CSS์ธํฐ๋ํฐ๋ธ-์นjavascriptmax4761max1733
ใป
0
235
1
- ๆช่งฃๆฑบ
๊ฐ์ด๋ฐ ํ์ด์ง๋ง ์ค์ธ์ด ๋ฉ๋๋ค
์ ์ ํ์ด์ง์ ์์๋ค์ ํด๋ฆญํด๋ ์ค์ธ์ด ์๋๊ณ , ๊ฐ์ด๋ฐ ํ์ด์ง์ ์์๋ง ์ค์ธ์ด ๋ฉ๋๋ค. ์ ๊ทธ๋ฐ์ง ๋ชจ๋ฅด๊ฒ ์ด์... ์ฌ๋ ค์ฃผ์ ์์ค์ฝ๋์์ ๊ทธ๋๋ก ํด๋ ์ ์์ ์ค์ธ์ด ๋์ง ์์ต๋๋ค. ํ์ด์ดํญ์ค์์๋ ์๋ํ๋๋ฐ ์ด๋ฏธ์ง๊ฐ ํ์๋์ง ์์ต๋๋ค <pre class=
์ง๋ฌธjavascriptHTML/CSS์ธํฐ๋ํฐ๋ธ-์นhaejin
ใป
0
262
1
- ๆช่งฃๆฑบ
body์ perspective๋ฅผ ์ฃผ๋ฉด ๊ฐ์๊ธฐ html๊ณผ body ๋์ด๊ฐ 0์ด ๋ฉ๋๋ค
body์ perspective๋ฅผ ์ฃผ๋ฉด html, body๊ฐ ๋์ด๊ฐ 0์ด ๋์ด์ ์ผ๋จ body์ 100vh ์ฃผ๊ธด ํ๋๋ฐ.. ์ ๊ฐ์์๋ ๋ค๋ฅด๊ฒ ์ ์ฉ๋๋ ๊ฑธ๊น์?
javascript์ธํฐ๋ํฐ๋ธ-์นHTML/CSSdotdot
ใป
0
397
1
- ๆช่งฃๆฑบ
์ค์ธ ์ํ์ผ ๋
์ค์ธ ์ํ์ผ ๋, current-menu ํด๋์ค๊ฐ ์ถ๊ฐ๋ menu-item ์ธ์ ๋ค๋ฅธ menu-item์ ๋๋ฅด๋ฉด leaflet ์ ์์น๊ฐ ๋ฐ๋๋ฉด์ ํ์ด ํ์ด์ง๋ ์ด์๊ฐ ์๊ฒผ์ต๋๋ค. current-menu ํด๋์ค๊ฐ ๋ฉ๋ด ์ค 1๊ฐ๋ผ๋ ์ถ๊ฐ๊ฐ
javascriptHTML/CSS์ธํฐ๋ํฐ๋ธ-์นleh87671680
ใป
0
262
1
- ๆช่งฃๆฑบ
์ด๋ฒคํธ ์์ ๋ฐฉ์ ์ง๋ฌธ
์ด๋ฒคํธ ์์ ๋ฐฉ์์ผ๋ก ํ๊ฒ๋๋ฉด ํ์ฌ 2F๋ฅผ ๊ฐ์ธ๋ page ์๋ page-flipped ํด๋์ค๊ฐ ์ถ๊ฐ๊ฐ ๋ฉ๋๋ค. 2F๋ฅผ ๊ฐ์ธ๋ page ์๋ page-flipped ํด๋์ค๊ฐ ์ถ๊ฐ๊ฐ ๋์ง ์๊ฒ ํ๋ ค๋ฉด data- ์์ฑ์ ์ด์ฉํด ์ ์ฉ
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นleh87671680
ใป
0
224
1
- ๆช่งฃๆฑบ
์ด์ฌ๋ ๋๊ตฐ์ง ์์ธ์..?
๋๊ตฌ์ง.... ์ ๋ฌผ์ด ๋ณด์ง.... :0 ๋ชฐ๋ผ์ ๊ตฌ๊ธ๋ง ํด ๋ณด์์ด์. <img src="https://cdn.inflearn.com/public/files/posts/3598ce1d-8207-405d-bc6a-db3e73cd09e0/who
์ธํฐ๋ํฐ๋ธ-์นjavascriptHTML/CSScookatrice
ใป
3
415
1
- ๆช่งฃๆฑบ
์ ์๋ ์ง๋ฌธ์์ต๋๋ค ์ด ๊ฐ์๋ฅผ ๋ฆฌ์กํธํ๊ฒฝ์์ ์ ์ฉํ๊ณ ์ถ์๋ฐ์,
๊ทธ๋ด๊ฒฝ์ฐ useEffect ์์์ ํจ์ ์ฒ๋ฆฌ๋ฅผ ํด์ค์ผํ ๊น์? ์๋ฅผ๋ค์ด ์ด๋ฐ์์ผ๋ก? <div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier Ne
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นwndtlr10248980
ใป
0
281
1
- ๆช่งฃๆฑบ
์ง๋ฌธ์์ต๋๋ค.
forwards ๋ฅผ ์์ฑ์ํด์ค๋ ์ ๋๋ฉ์ด์ ์ด ์ ๋๋ก ๋์ํ๋๋ฐ์. ์ด๋ค ํ์ ๋๋ฌธ์ ์ ์ฉ์ ํ์ ๊ฒ์ธ์ง ๊ถ๊ธํฉ๋๋ค! ๊ทธ๋ฆฌ๊ณ menu-item์ ํด๋ฆญํํ ์ค์ธ์ด ๋์์๋ ๋ค๋ฅธ๊ณณ์ ํด๋ฆญํ๋ฉด ๋ ์ด์์(?)์ด ๋ค๋ฅธ๋ฐ๋ก ์ด๋๋๋ํ์์ด์๋๋ฐ์ ์ด๋ฐ๊ฒฝ์ฐ
์ธํฐ๋ํฐ๋ธ-์นjavascriptHTML/CSSwndtlr10248980
ใป
0
205
1
- ๆช่งฃๆฑบ
์ ์๋ ์ง๋ฌธ์์ต๋๋ค. ใ
๋ฐฑํ์ด์ค ํ๋ ์ค๋ ๊ฐ๋๋ฅผ ๋๋ฆฌ๋ฉด ๊ทธ ๋ท๋ฉด์ด๋ณด์ด๋๊ฑด๊ฐ์? ๋ฐฑํ์ด์ค ์์ฒด๊ฐ ๋ท๋ฉด๋ง ์๋ณด์ด๊ฒ ํ๋์์ฑ์ธ๊ฐ์ ใ ? ๋ฐฑํ์ด์ค๋ฅผ ์์ฃผ๊ณ preserve-3d๋ง ์ฃผ์ด๋ ๋์ ๋ณด์ด๊ธฐ์๋ ๋๊ฐ์ ๋ณด์ด๋๋ฐ ๋ฐ๋ก ๊ผญ์ค์ผ ๋๋ ์์ฑ์ธ๊ฐ์ ใ ?
HTML/CSS์ธํฐ๋ํฐ๋ธ-์นjavascriptdbstjdgy61339
ใป
0
267
1
- ๆช่งฃๆฑบ
์ค์ธ์ด ์ ์๋๋์ง๋ฅผ ๋ชจ๋ฅด๊ฒ ์ด์..
(() => { const leaflet = document.querySelector(".leaflet"); const pageElems = document.querySelecto
HTML/CSSjavascript์ธํฐ๋ํฐ๋ธ-์นkha28581520
ใป
1
267
1
- ๆช่งฃๆฑบ
์ง๋ฌธ์ด ์์ด์
๊ฐ ํ์ด์ง๋ง๋ค transform-style: preserve-3d๋ก ์ค์ ํด์ฃผ๋ฉด .page-face์ backface-visibility : hidden์ด ์์ด๋ ์, ๋ท๋ฉด ํ์ธ์ด ์ ๋๋๊น backface-visibility : hidde
HTML/CSS์ธํฐ๋ํฐ๋ธ-์นjavascriptgcy
ใป
1
244
1
- ๆช่งฃๆฑบ
์ง๋ฌธ ์์ต๋๋ค.
body์ perspective๋ฅผ ์ฃผ์๊ณ leaflet์ preserve-3d๋ฅผ ์์ง ํด์ฃผ์ง ์์๋๋ฐ ์ด๋ป๊ฒ page๋ rotateY์ 3d ํจ๊ณผ๊ฐ ์ ์ฉ๋๊ฑด๊ฐ์?? body์ perspectiveํจ๊ณผ๊ฐ htmlํ๊ทธ ๋จ๊ณ๋ฅผ ๊ฑฐ์น๋ฉด ์ ์ฉ์ด ์๋๋ค๊ณ ํ์ จ๋
javascript์ธํฐ๋ํฐ๋ธ-์นHTML/CSSxf6a4or71284
ใป
0
369
2
- ๆช่งฃๆฑบ
์ ์๋ ์ง๋ฌธ ์์ต๋๋ค!
์๋ ํ์ธ์ ๊ถ๊ธํ์ ์ด ์์ด์ ์ง๋ฌธ ๋๋ฆฝ๋๋ค ใ .. ์ ๊ฐ ์ง๊ธ๊น์ง ์ ์๋ ๊ฐ์๋ฅผ ๋ด์์์์๋, ํญ์ ๋ถ๋ชจ ํ๊ทธ์ position: relative ๋ฅผ ์ ์ฉ ํด ์ฃผ์ ๋ค์, ์์ ํ๊ทธ์ position:absolute๋ฅผ ์จ์ฃผ์ ๊ฑธ๋ก ์๊ณ ์์ต๋๋ค.
์ธํฐ๋ํฐ๋ธ-์นjavascriptHTML/CSSrlfalstlr061198
ใป
1
262
2
- ๆช่งฃๆฑบ
์ค ํ๋ฉด ํฌ๊ธฐ ์ค์ฟ์๋ ๊ธ์๋ค ์์ ธ๋์ค๋๊ฑฐ๋ ์ด๋ป๊ฒ ํด๊ฒฐํ์ฃ ?
<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
391
2
- ๆช่งฃๆฑบ
์์ค์ฝ๋ ์์ถ์ด ํ๋ฆฌ์ง ์์ต๋๋ค.
๋ฐ๋์ง์ผ๋ก ํ์๋๋ฐ ํ์ผ ์์ถ์ด ํ๋ฆฌ์ง ์์ ์์ค์ฝ๋๋ฅผ ๋ณผ์๊ฐ ์์ต๋๋ค. ํน์ ํ์ผ์ ๋ฉ์ผ๋ก ๋ฐ์์ ์๋์ง ์ฌ์ญค๋ด ๋๋ค. damanegi1979@naver.com ์ ๋๋ค. ์๊ณ ํ์ธ์~
javascriptHTML/CSS์ธํฐ๋ํฐ๋ธ-์นdamanegi19792756
ใป
0
333
4

