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