강의 추천:

CSS scale3d() 함수

정의와 사용법 scale3d() CSS의

scale3d() 함수는 요소의 3D 확대를 정의합니다.

scale3d() 함수는 요소가 x, y, z 방향에서 확대 값을 정의합니다. transform 속성에서 사용됩니다.

인스턴스

예제 1

사용 scale3d() 多个 <div> 元素缩放:

#myDiv1 {
  transform: scale3d(0.8, 0.8, 0.8);
}
#myDiv2 {
  transform: scale3d(-0.5, -0.5, -0.5);
}
#myDiv3 {
  transform: scale3d(1.1, 1.2, 1);
}

직접 테스트해 보세요

예제 2

사용 scale3d() 이미지 확대:

#img1 {
  transform: scale3d(0.8, 0.8, 0.8);
}
#img2 {
  transform: scale3d(-0.5, -0.5, -0.5);
}
#img3 {
  transform: scale3d(1.1, 1.1, 1);
}

직접 테스트해 보세요

CSS 문법

scale3d(sx, sy, sz)
설명
sx 정수 또는 부수, 너비의 축소向量를 정의합니다.
sy 정수 또는 부수, 높이의 축소向量를 정의합니다.
sz 정수 또는 부수, z 방향의 축소向量를 정의합니다.

기술 세부 사항

버전: CSS 변환 모듈 레벨 2

브라우저 지원

표格에 나타난 숫자는 이 함수를 최초로 완전히 지원한 브라우저 버전을 나타냅니다。

크롬 에지 파이어폭스 사파리 오페라
12 12 10 4 15

관련 페이지

교본:CSS 3D 변환

참조:CSS 변환 속성

참조:CSS scale 속성

참조:CSS 스케일() 함수

참조:CSS scaleX() 함수

참조:CSS scaleY() 함수