[CSS] transform 변환 속성 - perspective, perspective-origin

 

▶ perspective

  : 하위 요소를 관찰하는 원근 거리를 설정.

 

- 속성 값으로 단위 입력. px, em 등의 단위 지정.

 

- perspective() 함수와는 다르게 하위 요소를 관찰.
- 값이 크면 원근감이 커지고 낮으면 가깝게 느껴짐.

 

[perspective 속성과 함수의 차이점]

 

- perspective 속성

  - 적용 대상: 관찰 대상의 부모요소.
  - 관찰 대상이 여럿이면 부모 요소에 속성 사용. 관찰 대상이란 원근법을 의미함.
  - 원근법의 기준점 설정: perspective-origin.

- perspective() 함수

  - 관찰 대상 자체가 적용 대상.
  - 관찰 대상이 하나면 관찰 대상 자체에 함수 사용.
  - 관찰하는 기준점 설정 시 transform-origin 사용.

- perspective 속성은 관찰 대상이 여럿이기 때문에 부모/조상 요소에 적용하여 하위 요소들을 관찰하는 원근 거리를 설정.
- transfrom: perspective() 변환 함수는 관찰 대상에 직접 적용하여 그 대상을 관찰하는 원근 거리를 설정.

 

---

 

▶ perspective-origin

- 내가 보는 시점을 위치를 바꿔서 보도록 설정.

 

[속성 값]

- 파란색 박스는 변형이 일어난 요소 자체를 의미.

- 토마토 색상의 박스는 perspective가 부여된 관찰 대상의 부모 요소.

 

- 기본값: x축 50, y축 50. 

  - 요소의 정중앙.
- x축: left, right, center의 키워드 및 %, 단위 사용 가능.
- y축, top, bottom, center의 키워드 및 %, 단위 사용 가능.