작성한 질문수 2

1

저도 문돌이랍니다! 화이팅! ㅋㅋ

1

먼저, 격한 칭찬 먼저 드립니다.. 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

이야 ㅠㅠ 문돌이 큰 깨달음을 받고 갑니다 ㅠ_ㅠ