JavaScript 없이 CSS에서 Div 요소의 중앙 확장을 달성하는 방법은 무엇입니까?

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

CSS 변환 영역에서는 div 요소가 중앙 축에서 우아하게 확장되는 것을 상상할 수 있습니다. , 상단 및 왼쪽 모서리에서 확장되는 기본 동작이 아닙니다. 그러나 이 원하는 효과는 JavaScript가 없으면 어려운 문제입니다.

해결책: 여백 조작

이 중심 확장을 달성하는 열쇠는 특정 매개 변수를 사용하여 div의 여백을 전환하는 데 있습니다. 공식. 이 기술에는 목표 크기와 초기 크기 간의 차이를 계산하고 결과를 2로 나누는 작업이 포함됩니다. 그런 다음 이 값은 전환 중에 음수 여백 조정으로 적용됩니다.

사용자 정의 옵션:

원하는 동작에 따라 세 가지 주요 옵션을 사용할 수 있습니다.

옵션 1: 공간 보존

이 옵션은 주변 요소에 영향을 주지 않고 예약된 공간 내에서 div를 확장합니다.

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: 55px; /* calculated as initial margin - ((width change and height change)/2) */
}

옵션 2: 주변 요소 재정의

음수 여백을 설정하면 이 옵션은 div가 인근 요소 위로 확장되어 해당 콘텐츠와 겹치게 됩니다.

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: -50px; /* calculated as 0 - ((width change and height change)/2) */
}

옵션 3: 이동 주변 요소

이 변형은 div를 이동하고 후속 요소를 문서 흐름 아래로 이동합니다.

#square {
    -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#square:hover {
    top: -50px; /* calculated as initial top - ((new height - initial height)/2) */
    left: -50px; /* calculated as initial left - ((new width - initial width)/2) */
    margin-right: -50px;
    margin-bottom: -50px;
}

참고: 이러한 계산은 정사각형 div에 적용됩니다. 정사각형이 아닌 요소의 경우 여백 조정 계산은 원하는 비례 크기 조정에 따라 약간 다를 수 있습니다.

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