transform을 사용하여 순수 CSS로 마우스를 가져갈 때 요소를 확대/축소하는 방법 알아보기 속성의 변환 방법:scale() .
호버 시 확대/축소
이 상자 위로 마우스를 움직여 보십시오.
원래 크기의 정확히 1.5배 크기로 조정되므로 마우스를 위로 가져가면 50% 더 커집니다.
<블록 인용>
CSS transform 속성의 scale 방법은 요소의 크기를 늘리거나 줄일 수 있습니다. 3D와 2D 모두에서 작동합니다. 이 간단한 예에서는 2D를 사용합니다.
위의 예를 다시 만들려면 1개의 HTML 요소와 2개의 CSS 규칙 집합이 필요합니다.
HTML
먼저 zoom-box라는 클래스로 HTML 요소를 만듭니다. :
<div class="zoom-box"></div>CSS
그런 다음 이 CSS를 스타일시트에 추가하십시오.
.zoom-box {
background-color:#CF4B32;
width: 100px;
height: 100px;
margin: 32px auto;
transition: transform .2s; /* Animation */
}
.zoom-box:hover {
transform: scale(1.5);
}그게 다야!
코드 작동 방식
- 먼저
zoom-box라는 클래스 속성을 사용하여 HTML div 요소를 만듭니다. . - 그런 다음 줌 상자 클래스에 대해 두 개의 규칙 세트를 생성합니다. 하나는 정적 기본 상태인
.zoom-box입니다. 동적 호버 상태용.zoom-box:hover. - 첫 번째 규칙 집합은 일부 외관/크기 속성(
height, width, color).margin속성은 상자를 가운데 정렬하기 위한 것입니다(선택 사항). .zoom-box의 중요한 부분 클래스는transition입니다. 값이transform인 속성 및.2s의 지속 시간 (200밀리초).- 두 번째 규칙 집합
.zoom-box:hover에서transform을 추가합니다. 속성,scale()방법을 값으로 합니다.1.5매개변수를 사용합니다. 호버에서 상자 요소가 얼마나 확장되어야 하는지를 결정합니다. 1.5는 원래 크기의 150%를 말하는 것과 같습니다.
브라우저 호환성
다음은 브라우저 공급업체 접두사가 추가된 이 자습서의 코드입니다. 따라서 모든 주류 브라우저, Chrome, Firefox, Safari, Opera에서 작동합니다.
.zoom-box {
background-color: #cf4b32;
width: 100px;
height: 100px;
margin: 32px auto;
-webkit-transition: -webkit-transform 0.2s;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s; /* Animation */
}
.zoom-box:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}알아두면 좋은 정보
transition만 추가했음에도 불구하고 box 요소는 동일한 전환 지속 시간/타이밍으로 확대 및 축소됩니다. 속성을 .zoom-box 수업.
이것은 transition이 속성이 원래 클래스 선택기에 추가됩니다(.zoom-box). ), 해당 값은 클래스에 연결된 모든 추가 선택기에 자동으로 추가됩니다. 이 경우에는 :hover입니다. (의사 클래스라고도 함) )
transition만 추가하면 :hover 속성 (의사) 선택기 클래스를 사용하면 축소되지 않고 확대 부분만 애니메이션됩니다. 상자 요소 외부로 이동하자마자 눈에 거슬리기 때문에 거의 원하지 않는 0초 지속 시간으로 갑자기 축소됩니다.
요소의 다양한 상태(위/아래)에서 다른 애니메이션 유형과 지속 시간을 사용하려면 transition을 추가하기만 하면 됩니다. :hover 속성 유사 클래스 선택기를 사용하고 다른 값을 지정합니다.