css perspective가 이상하게 동작할 때

문제 상황

perspective 속성을 사용하다보면 의도와 다르게 이상하게 동작할 때가 있습니다. 저는 문을 만들면서 이 상황을 겪게 되었는데요. 아래의 네모박스에 마우스를 가져가면 마치 문이 열리는 듯한 동작을 하도록 만들었습니다.

 

 

처음 동작은 부드럽게 되는 듯 하나, 마우스를 빠르게 왔다갔다 해보시면 perspective가 매우 작게 설정된(매우 가까이 에서 문이 열린) 것 같은 효과가 발생합니다.

 

원인과 해결 방법

이 문제는 원치않게 perspective가 변할 때 발생하는데요. 보통 perspective의 초기값을 설정하지 않았을 때 이런 문제가 발생하니 이벤트가 발생하지 않았을 때 초기값을 잘 지정해주면 됩니다.

 

저의 경우는 door-front에서 opend클래스가 추가 되었을 때 transform으로 perspective를 지정하고 있으니, open클래스가 없을 때도 동일한 perspective를 유지하도록 css를 추가해주면 됩니다. 완성된 코드는 아래와 같이 문제 없이 동작합니다.

 

 

변경된 코드 부분

/* 변경 전 */
.door-front{
  position: absolute;
  width:100%;
  height:100%;
  background-color: rgb(201, 31, 124);
  transform-origin: left;
  transition: transform .5s;
  z-index: 2;
}

/* 변경 후 */

.door-front{
  position: absolute;
  width:100%;
  height:100%;
  background-color: rgb(201, 31, 124);
  transform-origin: left;
  transition: transform .5s;
  z-index: 2;
  transform: perspective(1000px);  /* 변경된 부분! */
}