[CSS] 열리는 문 만들기

문을 두드려보세요! (닫으실 때도 문을 누르셔야 닫힙니다.)

CSS를 이용해 여닫을 수 있는 문을 만들 수 있습니다.
문은 3d로 만들어보려다 데스크탑에선 딱 맞췄는데 화면이 작아지니까 입체로 만들려고 덧댄 부분들이 뒤틀리더라고요 ㅠㅠ 이건 시간 내서 제대로 해봐야 하지 않을까 싶습니다.

CSS

body.doorOpened #door {
    transform: perspective(100vw) rotateY(-80deg);
}

문을 여는데 제일 중요한 CSS만 가져왔습니다.
글 적기 편하려고 transform perspective를 썼는데, 굳이 이렇게 하지 않으시고 부모 요소에 perspective를 주셔도 됩니다.

#doorWrap {
    position: absolute;
    bottom: 10vh;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    z-index: 5;
    clip: rect(-5vh, auto, 100vh, auto);
    perspective: 100vw;
}

#door 부모 요소에 적용된 CSS입니다.
#door을 transform: rotateY(-80deg)만 주시고 perspective를 이렇게 주셔도 됩니다.

clip 부분은 문이 열렸을 때 문 밖으로 튀어나오는 부분을 숨기기 위해 사용했습니다.

Javascript

document.getElementById("door").addEventListener("click", function () {
    document.body.classList.toggle("doorOpened");
});

단순히 클릭 되면 class만 toggle 하도록 해뒀습니다.