티스토리 뷰
차이 | 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.
[공부 좌표]
'이론 > CSS' 카테고리의 다른 글
[CSS] 웹 폰트 속성 (0) | 2021.02.16 |
---|---|
[CSS] transform의 translate 속성들 (0) | 2021.02.07 |
[CSS] perspective-origin (0) | 2021.02.07 |
[CSS] transform-style (0) | 2021.02.07 |
[CSS] position (0) | 2021.01.27 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 불일치 연산자
- 동치 연산자
- scrollHeight
- innerHeight
- 객체의 프로퍼티
- property
- 프로퍼티
- scrollTop
- 대괄포 표기법
- 링크막기 #a링크막기
- 일치 연산자
- constructor
- 점 표기법
- clinetTop
- [[Prototype]]
- outerHeight
- 동등 연산자
- __proto__
- clientHeight
- prototype 프로퍼티
- offsetTop
- offsetHeight
- 부등 연산자
- @font-face
- javascript class
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함