translateZ 에 px 이 아닌 vw 로 값을 주신 이유가 있을가요?

Question

transform: translateZ(-490vw); /* 줌아웃 */ .wall-front-a{transform: translateZ(300vw);} .wall-front-b{transform: translateZ(50vw);} .wall-front-c{transform: translateZ(-200vw);} .wall-front-d{transform: translateZ(-500vw);} 이렇게 translateZ 에 px, rem , % 이가 아닌 vw 를 사용하신 이유가 가로축 을 기준으로 원근감을 주기 위해서 이신게 맞을까요?

studiomeal · Answer

네, 맞습니다. 현재 보는 화면 크기 기준으로 잡으려고 vw 단위를 사용했습니다. 디자인에 관련된 부분이므로, 적당한 수치의 다른 단위를 사용하셔도 괜찮습니다.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴이에요. translateZ 값에 px, rem, %가 아닌 vw를 사용한 이유는 원근감을 주기 위해서입니다. translateZ 속성은 요소를 3D 공간으로 이동시키는데, 값이 양수인 경우에는 사용자가 요소를 자신에서 멀어지도록 이동시키고, 값이 음수인 경우에는 사용자가 요소에 가까워지도록 이동시킵니다. vw는 viewport width의 약어로 화면 너비에 대한 상대적인 단위입니다. 따라서 vw 값은 화면 너비에 대한 비율로 계산되므로, 사용자의 화면 크기에 따라 translateZ 값이 동적으로 변경됩니다. 이렇게 함으로써 가로축을 기준으로 원근감을 주는 효과를 만들어낼 수 있습니다. 따라서 px, rem, % 대신 vw를 사용한 것은 사용자의 화면 크기에 따라 원활한 화면 전환과 좀 더 유연한 레이아웃을 구성하기 위함이었을 것으로 예상됩니다. 잘못된 정보를 전달한 것은 아닌지 다시 한 번 확인해 주세요. 요청하신 내용으로 도움을 드릴 수 있었기를 바랍니다. 감사합니다.