CSS 관점 속성
예시
3D 위치 요소에 몇 가지 관점을 제공합니다.
#div1
{
perspective: 100px;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
속성 은 perspective
3D 위치 요소에 약간의 원근감을 제공하는 데 사용됩니다.
속성 은 perspective
개체가 사용자로부터 얼마나 멀리 떨어져 있는지 정의합니다. 따라서 값이 낮을수록 높은 값보다 더 집중적인 3D 효과가 나타납니다.
요소 의 속성을 정의할 때 perspective
투시도를 얻는 것은 요소 자체가 아니라 CHILD 요소입니다.
팁: 또한 사용자가 3D 개체를 보고 있는 위치를 정의 하는 perspective-origin 속성을 살펴보십시오.
Perspective 속성을 더 잘 이해하려면 데모 를 보십시오 .
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
-webkit- 또는 -moz- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0.3 -webkit- |
23.0 15.0 -webkit- |
CSS 구문
perspective: length|none;
속성 값
Property Value | Description |
---|---|
length | How far the element is placed from the view |
none | Default value. Same as 0. The perspective is not set |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
더 많은 예
예시
큐브를 만들고 다른 관점을 설정합니다.
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
관련 페이지
CSS 튜토리얼: CSS 3D 변환
HTML DOM 참조: 원근 속성