CSS3의 변환 원본에 대한 변환(-50%,-50%)의 이상한 효과는 무엇입니까?

Question

으아악

음수 여백-왼쪽 방법을 사용하여 중심을 정렬한 다음 마우스를 가리키면 확대할 때 중심점은 변환 원점에서 설정한 위쪽 및 아래쪽 중심이며 문제가 없습니다.

그러나 중앙 정렬을 위해 변환:번역(-50%,-50%)을 사용하면:

으아악

마우스를 위로 올리면 배율의 중심점이 왼쪽 상단에 도달한 것 같습니다.
콘솔에서 변환 원본 속성이 작동 중입니다. 왜 이런 일이 일어나는지 매우 혼란스럽습니다. 조언을 부탁드립니다

Answer 1

명백한 실수, hover 的时候把原有的 translate가렸어요

올바른 작성방법은 다음과 같습니다

으아아아