CSS 전환을 사용하여 DIV 요소의 중심 확장을 달성하는 방법은 무엇입니까?

CSS를 사용하여 중앙에서 DIV 확장

이 질문에서는 div가 중앙에서 확장되는 효과를 만드는 것을 목표로 합니다. 왼쪽 상단에서 일반적인 확장이 아닌 scale()과 같은 CSS 변환을 사용하면 이 효과를 얻을 수 있지만 픽셀 정밀도가 부족하고 주변 레이아웃에 영향을 주지 않습니다.

이 동작을 달성하는 핵심은 여백을 전환하는 데 있습니다. 특정 여백 값을 계산하면 문서 흐름을 방해하지 않고 div가 중앙에서 확장되도록 할 수 있습니다.

중앙 확장 옵션

옵션 1 : 예약된 공간 내 확장

<code class="css">#square {
  margin: 100px;
  transition: width 1s, height 1s, margin 1s;
}
#square:hover {
  width: 100px;
  height: 100px;
  margin: 55px;
}</code>

이 옵션에서는 div가 미리 예약된 주변 공간 내에서 확장됩니다. 여백 전환은 초기 여백에서 너비/높이 변경의 절반을 뺀 값으로 계산됩니다.

옵션 2: 주변 요소에 대한 확장

<code class="css">#square {
  margin: 0;
  transition: width 1s, height 1s, margin 1s;
}
#square:hover {
  width: 110px;
  height: 110px;
  margin: -50px;
}</code>

이 옵션을 사용하면 div는 주변 요소 위로 확장됩니다. 여백 전환은 0에서 너비/높이 변경의 절반을 뺀 값으로 계산됩니다.

옵션 3: 다른 요소 확장 및 이동

<code class="css">#square {
  position: relative;
  transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#square:hover {
  width: 110px;
  height: 110px;
  top: -50px;
  left: -50px;
  margin-right: -50px;
  margin-bottom: -50px;
}</code>

이 옵션은 다음을 허용합니다. div를 사용하여 흐름의 이전 요소 위로 확장하고 후속 요소를 이동합니다. 여백 전환은 이전 옵션과 유사하게 계산됩니다.

비정사각형 DIV에 대한 고려 사항

위 옵션은 정사각형 div를 가정하지만 다음에 적용될 수도 있습니다. 마진 계산을 약간 조정한 정사각형이 아닌 div. 예를 들어 너비와 높이가 동일하지 않은 직사각형은 다음과 같이 여백을 사용하여 전환할 수 있습니다.

<code class="css">margin: -50px -100px;</code>

요약하자면 CSS 전환을 사용하여 여백을 조작하면 중앙에서 확장되는 div를 생성할 수 있습니다. 원하는 대로 주변 레이아웃에 영향을 줍니다.

위 내용은 CSS 전환을 사용하여 DIV 요소의 중심 확장을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!