강의 추천:
- 이전 페이지 CSS 스케일() 함수
- 다음 페이지 CSS scaleX() 함수
- 하나 위로 돌아가기 CSS 함수 참조 매뉴얼
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 스케일() 함수
- 다음 페이지 CSS scaleX() 함수
- 하나 위로 돌아가기 CSS 함수 참조 매뉴얼