-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
전진 3d 스크롤에서, 위 아래에도 포갤 때...
20.11.11 21:24 작성 조회수 111
0
안녕하세요? css 자바스크립트 완전 처음 배우고 있습니다.
비전공자라 완전 처음이에요 ㅠㅠ
3d 스크롤 6강까지 듣다가 위 아래에도 한번 포개어 볼까 하는 생각이 들어서 만들어 봤는데요...
.wall-top {
height: 1000vw;
transform: rotateX(90deg) translateZ(500vw);
background: red;
}
.wall-bottom {
height: 1000vw;
transform: rotateX(90deg) translateZ(450vw);
background: black;
}
이런식으로 하니까 되긴 되더라구요...
그런데 보이는게 되는 거랑은 별개로 제가 이해를 못했습니다 ㅠㅠ
질문은 두 가지입니다.
위 아래 할 때에 왜 vh를 쓰면 안되는 것인지,
또 translateZ할 때, 왜 위에는 500vw이고 아래는 450vw를 해야 포개어지는지 궁금합니다 ㅠ_ㅠ
답변을 작성해보세요.
1
1
1분코딩
지식공유자2020.11.12
먼저, 격한 칭찬 먼저 드립니다.. CSS 처음 배우시는데 이렇게 응용을 하시다니요!
사실 이 예제는 구조도 그렇고 난이도가 꽤나 있는 까다로운 예제라서,
처음 하시는 분들은 레이아웃을 이해하기도 쉽지 않답니다. 근데 응용을 해서 수정하시는거 정말 대단하세요~
코드를 이렇게 해보세요^^
.wall-top {
width: 100vw;
height: 1000vw;
background: red;
transform-origin: top;
transform: translateZ(-500vw) rotateX(90deg);
}
.wall-bottom {
width: 100vw;
height: 1000vw;
background: black;
transform-origin: top;
transform: translateZ(-500vw) translateY(100vh) rotateX(90deg);
}설명을 드려보면
height를 1000vw로 늘린 후
상단을 기준으로 회전시키기 위해 transform-origin: top을 해줍니다.
그리고 저~ 맨뒤로 보내기 위해서,
맨 뒤에 있는 wall과 같은 위치인 translateZ(-500vw)로 보냅니다.
여기까지 하면 저 맨 뒤 벽에, 지금 추가해준 길쭉한 빨간색과 검은색이 포개어져 있을거에요.
wall-bottom은 바닥으로 내려야하므로 wall의 기본 높이만큼(100vh) translateY로 이동시켜주고요,
각각 rotateX로 90도 회전을 해주면 완성이 됩니다.
transform에 있는 속성들을 일단 싹 지워주시고,
제가 글로 설명한 순서대로 속성을 추가해보시면 어떤 식으로 위치를 잡았는지 이해하시는게 좀 더 수월하실거에요^^
0
답변 3