perspective-origin
3D 변환의 소실점(vanishing point) 위치를 설정합니다. poc가 기본값이며, 소실점을 이동하면 3D 효과의 시점이 변합니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
poc | perspective-origin: center | 중앙 소실점 (기본값) |
pot | perspective-origin: top | 상단 소실점 |
pob | perspective-origin: bottom | 하단 소실점 |
pol | perspective-origin: left | 좌측 소실점 |
por | perspective-origin: right | 우측 소실점 |
사용 예시
perspective-origin은 perspective 속성이 설정된 부모 요소에 적용합니다.
<!-- 기본 중앙 시점 -->
<div class="poc">
<div class="tr45deg">3D 회전 요소</div>
</div>
<!-- 좌측 상단 시점 -->
<div class="pol">
<div class="tr45deg">좌측에서 바라본 시점</div>
</div>