저도 같은 현상이 있었습니다!&nbsp; 먼저 애니매이션이 적용되고 기준점이 옮겨졌습니다.

&nbsp; &nbsp; .box {
&nbsp; &nbsp; &nbsp; width: 100px;
&nbsp; &nbsp; &nbsp; height: 100px;
&nbsp; &nbsp; &nbsp; border: 2px solid black;
&nbsp; &nbsp; &nbsp; background: rgba(255, 255, 0, 0.7);
&nbsp; &nbsp; &nbsp; transition: 1s;
&nbsp; &nbsp; }
&nbsp; &nbsp; .box:hover{
&nbsp; &nbsp; &nbsp; transform-origin: left top;&nbsp;
&nbsp; &nbsp; &nbsp; transform: scale(2) rotate(15deg);

transform-origin을 .box:hover {} 에 넣는 대신 .box {}에 넣어주세요~ :hover는 마우스를 올렸을 때만 적용되는 것이라서 마우스를 빼면 효과도 사라져서 예상과 다른 동작이 될 수 있습니다.
특정 속성에만 transition을 적용하려면 transition: width 0.5s; 이런 식으로 해당 속성을 명시해주시면 됩니다.

그리고 마우스 호버시에 속성 변환에 트랜지션을 줄때, 한가지 속성 (예로들면 width와 컬러 두가지 속성이 있다면)에만 트랜지션을 주려면 어떻게 해야하나요?

인프런 커뮤니티 질문&답변

안녕하세요 아래질문과 같은현상이 있었습니다.