마우스를 가리킬 때에도 이 요소를 화면 중앙에 맞추려고 합니다.
아래 예에서는 div가 중앙에 위치하지 않습니다. 마우스를 올려도 div가 50% 변환되고 위쪽/왼쪽도 변환된다는 사실을 알고 있으므로 일반적으로 요소를 중앙에 배치하는 데 사용합니다.
으아악 으아악
P粉2116001742024-02-05 07:00:08
오류는 :hover 选择器中，因为转换中没有 translate()에 있으며 기본적으로 0으로 재설정되고 있는데 이는 원하는 것이 아닙니다.
이전 내용을 잊어버리고 덮어쓰기 때문입니다.
간단한 해결책은 다음과 같습니다.
❌
으아악✅
으아악간단한 설명은 다음과 같습니다.
최신 솔루션(코드 적음):
CSS 그리드 사용 https://developer.mozilla.org/ en-US/docs/Web/CSS/grid
place-items을 사용하면 변환이나 위치 없이 자동으로 중앙에 배치됩니다... https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
또한 처음에는 0.2 进行缩放，只需从 scale(1) 开始，然后通过悬停更大的比例来使其更大，例如 4에 대해 걱정할 필요가 없습니다. (따라서 마우스를 올리지 않으면 200px에서 0.2scale로의 전환 시작 시 오류가 발생하지 않습니다.)
그러나 CSS가 IE 및 이전 브라우저에서 작동하도록 하려면 위치, 이동, 위쪽, 왼쪽을 사용하는 것이 더 좋습니다...
그러나 사용자는 최신 브라우저를 사용하므로 더 나은 가독성과 단순성을 위해 Flexbox 또는 Grid를 사용하는 것이 좋습니다.
자세한 내용은 https://caniuse.com을 참조하세요. (예: 2020년부터 모든 브라우저에서 그리드 95% 지원, 2017년부터 Chrome 지원)
여기 CSS 그리드 솔루션이 있습니다
P粉7978557902024-02-05 00:44:14
변환 순서에 따라 요소가 표시되는 방식이 결정된다는 점을 기억하세요. 요소의 50%를 이동하는 것부터 시작합니다 top: 50%; left: 50%;，将其置于右下象限。然后你把它变小 transform:scale(0.2) 然后然后你把它向左移动现在较小尺寸 translate(-50%, -50%).
번역을 먼저 두면 요소가 중앙에 배치되고 작아집니다. 크기를 늘릴 때는 translate(-50%, -50%)도 포함해야 합니다. 후속 번역은 현재 번역을 추가하는 대신 덮어쓰므로 .