질문있습니다 !

CSS 클래스를 정의해두는 이유는 성능 차이때문이라기 보다는, 개발 편의상의 이유가 더 큽니다.
우리 예제는 간단히 문만 열지만, 활성화할 경우 문도 열고 문 안의 색도 바뀌고, 캐릭터 크기도 바뀌고.. 이런 식으로 디자인상 처리할게 많다보면 일일이 style 객체를 이용해 다 컨트롤 하는게 아주 번거로운데, CSS 클래스로 미리 정의해두고 클래스만 바꿔주면 적용되도록 하면 상대적으로 간편하니까요~^^
광클할 경우 perspective의 효과가 중첩되는건 저도 처음 보았네요 ㅎㅎㅎ;; 저도 덕분에 알게되어 감사합니다.
transition을 제거하면 그렇지 않은 것으로 보아, 원래 적용되어있던 perspective가 채 초기화 되기 전에 중첩이 되는게 아닌가 싶습니다. 모든 속성이 그런 것은 아니고, perepective에 한정된 것으로 보이네요~~
관련해서 혹시 다른 정보를 알게되면 다시 또 추가 작성해보도록 하겠습니다!