perspective
- perspective 속성은 관찰자 시점(위치)의 거리를 지정하여 원근감을 표시합니다.
- 입체적인 3D 효과를 주기 위해 사용합니다.
기본형
perspective : none | length
- none : 모든 속성에 원근감을 적용하지 않습니다.
- length : 평면(0)과 관찰자 시점 사이의 거리를 나타냅니다.
- 0 또는 음수 값이면 원근감이 적용되지 않습니다.
예제 1
- 다음은 perspective 속성을 이용하여 x축을 기준으로 하여 45도 회전하는 예제입니다.
- 관찰자의 시점에서 100, 200, 300px만큼 떨어져있는 영역을 바라보는 것입니다.
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 2
- 다음은 부모 요소에 perspective 속성을 정의한 것과 개별 요소들에게 각각 perspective()를 적용한 예제입니다.
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
변형되는 요소를 포함하고 있는 부모 요소에 원근감을 설정해야합니다. 해당 요소에만 perspective 속성을 적용하면 형제 요소들을 가지고 있을 때 다른 결과를 낳게 됩니다.
같이 보면 좋은 글