CSS3 perspective 속성 사용법 및 예제

perspective CSS 속성은 모든 자식 요소의 시각적 투시를 정의합니다. 이는 보통 Z = 0 평면과 시청자 사이의 거리를 결정하여3d 요소를 깊이감 있게 정위치시킵니다. 각 Z > 0의3D 요소가 더 크게 되고, 각 Z < 0의3D 요소가 더 작아집니다.

아래 표는 이 속성의 사용 설명과 버전 기록, 그리고 JavaScript 스크립트에서 이 속성의 사용 문법을 나타냅니다.

Perspective 사용 문법

이 속성의 문법은 다음과 같습니다:

perspective: length | none | initial | inherit

아래 예제는 perspective 속성을 사용하는 방법을 보여줍니다.

.container {
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　500px;
　　　　border:　4px solid #e5a043;
　　　　background: #fff2dd;
}
.transformed {
　　　　-webkit-transform: translate3d(25px,　25px,　50px);　/*　Chrome, Safari, Opera　*/
　　　　transform: translate3d(25px,　25px,　50px);　
}

속성 값

아래 표는 이 속성의 값을 설명합니다.

브라우저 호환성

perspective 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다.

추가로 읽기

다음 튜토리얼을 참조하십시오:CSS3 3D 변환。

관련 속성:perspective-origin，backface-visibility，transform，transform-origin，transform-style。