[CSS] transform: perspective()와 perspective

차이	perspective	perspective()
유형	속성	메서드
작성 위치	부모	자신
사용 방법	perspective: 값	transform: perspective(값)

---

transform: perspective()

- 3D 공간에서 요소와 관측 점과의 거리, 즉 원근감을 지정하는 속성이다.

- 값이 작을수록 가깝게 보이고, 멀수록 멀게 보인다.

 

perspective는 뷰어와 요소와의 거리를 나타내고,
transform-style은 요소의 표현을 나타내고,
perspective-origin는 뷰어가 보는 위치를 설정한다.

---

perspective(d)

d

- 뷰어에서 z = 0 평면까지의 거리를 나타내는 <length>이다.

- 0 또는 음수 값은 원근 변환이 적용되지 않는다.

 

[예제]

See the Pen [CSS] transform: perspective()와 perspective by mill (@millfeel) on CodePen.

---

perspective

- transform: perspective()와 동일하다.

- 속성은 부모에게 사용하고, 적용 범위는 자식에게만 가능하다. (자손X)

- perspective-origin을 사용할 수 있다.

---

Q. transform: perspective()와 perspective의 차이는?

perspective의 경우

See the Pen [css] persepctive by mill (@millfeel) on CodePen.

관찰자가 사물을 한꺼번에 보고 있다.

 

transform: perspective() 경우

See the Pen [css] perspective() by mill (@millfeel) on CodePen.

관찰자가 사물을 한개씩 보고 있다.

---

[공부 좌표]

<transform-function>

perspective()

perspective