taehyeong Gim

문이 깨져보이는 문제의 원인을 알아냈습니다.
perspective로는 사용자간의 거리를 설정할 수 있는데요, 기본은 0px인 상태로 이 상태에서는 원근효과가 적용되지 않습니다.
하지만 perspective가 0px를 초과하는 값이 될 경우 원근효과가 적용되기 시작합니다.
위의 점이 문제가 되는 이유는 기본값이 0px 인 원근효과가 0.5초에 걸쳐 800px로 변화한다는 점에 있습니다. (원근값은 그대로인걸 의도했는데, 문이 열리면서 원근값도 같이 변해버립니다.)&nbsp;
마우스를 올려놓고, 뗄때 애니메이션이 끝날때까지 쭉 기다리는 경우에는 perspective는 0->800px, 800px -> 0px 로 원근효과가 꺼지고, 켜지는 동작이 천천히 이루어 지므로 문제가 발생하지 않습니다.
그러나 닫히는 중간에 다시 마우스를 올려놓는 경우 800px-> 0px에 가까워지는 도중에 다시 transform이 진행되므로 (0에 가까운 값)px -> 800px 의 원근변화가 진행되게 됩니다.
아주 작은 perspective 값은 유저와 아주 가까이 있는 듯한 입체효과를 주므로 문이 아주 커져보이게 됩니다. 따라서 문이 닫히기 직전에 다시 마우스를 갖다 댈수록 더 작은 값에서 transform이 진행되므로 문이 커져보이게 됩니다.
이런 현상을 해결하기 위해선 마우스를 올려놓기 전, 후 perspective가 동일해야 하므로 .door-body 의 css에 transform : perspective(800px)를 추가하면 됩니다 😁

taehyeong Gim

Posts