[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 하도록 해뒀습니다.
