마우스오버 시 변형된 요소가 다시 스냅되는 이유는 무엇입니까?

<h2>내 변환이 스냅백되는 이유</h2>

CSS 영역에서 파악하기 어려운 사라지는 변환은 수수께끼 같은 현상이 될 수 있습니다. 여기서는 전환 시 요소의 변형이 되돌아가는 것처럼 보이는 이 문제의 특정 사례를 자세히 살펴보겠습니다.

<h3>문제: 변형 요소 스냅백</h3>

다음을 고려하세요. 다음 CSS 코드:

<code class="css">.blockquote {
  transition: all 250ms ease-in-out;
}

.blockquote:hover .blockquote2 {
  transform: translateX(-20px);
}

.blockquote:hover .author {
  transform: translateX(200px);
}</code>

blockquote 요소 위로 마우스를 가져가면 효과가 이상합니다. 변환 이벤트가 처음에 트리거되는 동안 변환된 요소는 결국 원래 위치로 돌아갑니다.

<h3>원인 및 해결 방법</h3>

이 문제의 핵심은 CSS 속성 "표시" CSS 변환은 일반적으로 display: inline으로 설정된 요소와 호환되지 않습니다. 따라서 스냅 문제를 해결하려면 디스플레이 설정을 다음과 같이 수정해야 합니다: inline-block.

업데이트된 코드는 다음과 같습니다.

<code class="css">.blockquote {
  display: inline-block;
  transition: all 250ms ease-in-out;
}

.blockquote:hover .blockquote2 {
  transform: translateX(-20px);
}

.blockquote:hover .author {
  transform: translateX(200px);
}</code>

이러한 변경으로 전환은 다음과 같습니다. 예상대로 작동하며 요소는 마우스를 가져가도 변형된 위치를 유지합니다.

위 내용은 마우스오버 시 변형된 요소가 다시 스냅되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!