CSS perspective-origin 속성 – 3D 원근감을 바라보는 관찰자 위치 지정

정의 및 사용 방법

perspective-origin 속성은 3D transform에서 원근감을 바라보는 관찰자의 기준 위치(origin)를 지정합니다.

이 속성은 perspective 속성으로 지정된 원근감의 기준 영역과 거리에서, 관찰자가 자식 요소의 3D 입체감을 바라보는 가로(X)·세로(Y) 기준 위치를 설정하는 역할을 합니다.

기본 예제

아래의 'CSS 라이브 데모'를 통해 perspective-origin 값에 따라 3D 입체감이 어떻게 달라지는지 직접 확인해 보세요.
슬라이더를 조절하면 관찰자의 X·Y 기준 위치가 바뀌는 효과를 확인할 수 있습니다.

CSS 라이브 데모: perspective-origin 슬라이더를 직접 조절해서 확인해보세요.
관찰자가 자식 요소의 3D 입체감을 바라보는 가로(X)·세로(Y) 기준 위치를 설정하는 역할을 합니다.

가로 축 (X)

세로 축 (Y)

현재 perspective-origin: 50% 50%

앞

뒤

좌

우

상

하

CSS 라이브 데모 제작 Tip
이 데모에 사용된 슬라이더와 눈금 표시 방법이 궁금하신가요?
HTML <input type="range"> – 올바른 이해와 사용 방법에서 자세한 구현 방법을 확인하실 수 있습니다.

형식 구문

구문

CSS

/* 두 개 키워드 값 구문: 가로 축 | 세로 축 */
perspective-origin: left top;
perspective-origin: left center;
perspective-origin: left bottom;
perspective-origin: right top;
perspective-origin: right center;
perspective-origin: right bottom;
perspective-origin: center top;
perspective-origin: center center; /* 초깃값 */
perspective-origin: center bottom;

/* 한 개 키워드 값 구문: 가로 축 | 생략한 세로 축은 무조건 center 값 */
perspective-origin: left; /* left center;와 동일 */
perspective-origin: right; /* right center;와 동일 */
perspective-origin: center; /* center center;와 동일 */

/* 백분율(%) 값 */
perspective-origin: 0% 0%; /* left top;과 동일 */
perspective-origin: 50% 50%; /* center center;와 동일 */
perspective-origin: 100% 100%; /* right bottom;과 동일 */
perspective-origin: 25% 40%;

/* 길이 값 */
perspective-origin: 10px 25px;
perspective-origin: 2em 5em;
perspective-origin: 2rem 5rem;
perspective-origin: 20vw 40vh;

/* 두 개 값 구문: 가로 축 | 세로 축 */
perspective-origin: left 2em;
perspective-origin: 2em bottom;
perspective-origin: 2em 50%;

/* 한 개 값 구문: 가로 축 | 생략한 세로 축은 무조건 center 값 */
perspective-origin: 0; /* left center;와 동일 */
perspective-origin: 20px; /* 20px center;와 동일 */
perspective-origin: 50%; /* center center;와 동일 */

/* 글로벌 값 */
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: revert;
perspective-origin: revert-layer;
perspective-origin: unset;

값

perspective-origin 속성 값
`left`	관찰자의 기준 위치를 `perspective` 속성으로 지정된 기준 영역의 맨 왼쪽에 배치합니다.
`right`	관찰자의 기준 위치를 `perspective` 속성으로 지정된 기준 영역의 맨 오른쪽에 배치합니다.
`top`	관찰자의 기준 위치를 `perspective` 속성으로 지정된 기준 영역의 맨 위쪽에 배치합니다.
`bottom`	관찰자의 기준 위치를 `perspective` 속성으로 지정된 기준 영역의 맨 아래쪽에 배치합니다.
`center`	가로 축 값에서는 관찰자의 기준 위치를 `perspective` 속성으로 지정된 기준 영역의 가로 축 중앙에 배치합니다. 세로 축 값에서는 관찰자의 기준 위치를 `perspective` 속성으로 지정된 기준 영역의 세로 축 중앙에 배치합니다.
`길이`	관찰자의 기준 위치를 `perspective` 속성으로 지정된 기준 영역의 가장자리 간격 띄우기(offset)를 길이로 지정하는 값입니다. 음수 값이 허용됩니다. 글자 크기 상대 길이(예: `rem`, `em`) 뷰포트 백분율 길이(예: `vh`, `vw`) `px` 등 CSS가 지원하는 길이
`백분율(%)`	관찰자의 기준 위치를 `perspective` 속성으로 지정된 기준 영역의 가장자리 간격 띄우기(offset)를 백분율로 지정하는 값입니다. 음수 값이 허용됩니다. 가로 축 `0%`는 관찰자의 기준 위치를 `perspective` 속성으로 지정된 기준 영역의 맨 왼쪽에 배치합니다. (`left`와 동일) `50%`는 관찰자의 기준 위치를 `perspective` 속성으로 지정된 기준 영역의 가로축 중앙에 배치합니다. (`center`와 동일) `100%`는 관찰자의 기준 위치를 `perspective` 속성으로 지정된 기준 영역의 맨 오른쪽에 배치합니다. (`right`와 동일) 세로 축 `0%`는 관찰자의 기준 위치를 `perspective` 속성으로 지정된 기준 영역의 맨 위쪽에 배치합니다. (`top`과 동일) `50%`는 관찰자의 기준 위치를 `perspective` 속성으로 지정된 기준 영역의 세로 축 중앙에 배치합니다. (`center`와 동일) `100%`는 관찰자의 기준 위치를 `perspective` 속성으로 지정된 기준 영역의 맨 아래쪽에 배치합니다. (`bottom`과 동일)

값에 따른 구현 예제

앞선 기본 예제에서는 정육면체를 통해 perspective-origin 속성의 개념을 확인했습니다.
이어지는 예제에서는 단순한 3D 요소에 서로 다른 값을 적용하여, 이 속성이 구현 결과에 어떤 영향을 주는지 살펴봅니다.

다음 예제들은 모두 동일한 HTML 구조와 3D 변형을 사용하며, perspective-origin 값만 변경하여 결과를 비교합니다.

HTML

<div class="container"> <!-- perspective 속성으로 지정된 기준 영역 -->
    <div class="rotator">Rotator</div> <!-- 3D transform이 적용될 요소 -->
</div>

`perspective-origin: center center`

CSS

.container {
    width: 150px; height: 150px;
    border: 3px dashed #663399;
    perspective: 300px; /* perspective 속성으로 지정된 요소가 기준 영역이 됨 */
    perspective-origin: center center; /* 50% 50%;와 동일 */
}
.rotator {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 0, 200, .4);
    transform: rotateX(45deg);
}

구현 설명

perspective: 300px이 지정된 .container가 perspective-origin으로 지정할 위치(origin)의 기준 영역이 됩니다.
관찰자는 기준 영역인 점선으로된 .container를 기준으로 거리 300px에 위치하며, 가로(X)·세로(Y) 기준 위치가 모두 중앙인 지점에서 3D가 구현된 .rotator의 입체감을 바라보게 됩니다.

`perspective-origin: left center`

CSS

.container {
    width: 150px; height: 150px;
    border: 3px dashed #663399;
    perspective: 300px; /* perspective 속성으로 지정된 요소가 기준 영역이 됨 */
    perspective-origin: left center; /* 0 50%;와 동일 */
}
.rotator {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 0, 200, .4);
    transform: rotateX(45deg);
}

구현 설명

perspective: 300px이 지정된 .container가 perspective-origin으로 지정할 위치(origin)의 기준 영역이 됩니다.
관찰자는 기준 영역인 점선으로된 .container를 기준으로 거리 300px에 위치하며, 가로(X)는 왼쪽 끝, 세로(Y)는 중앙에 해당하는 지점에서 3D 변형이 적용된 .rotator의 입체감을 바라보게 됩니다.

`perspective-origin: right center`

CSS

.container {
    width: 150px; height: 150px;
    border: 3px dashed #663399;
    perspective: 300px; /* perspective 속성으로 지정된 요소가 기준 영역이 됨 */
    perspective-origin: right center; /* 100% 50%;와 동일 */
}
.rotator {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 0, 200, .4);
    transform: rotateX(45deg);
}

구현 설명

perspective: 300px이 지정된 .container가 perspective-origin으로 지정할 위치(origin)의 기준 영역이 됩니다.
관찰자는 기준 영역인 점선으로된 .container를 기준으로 거리 300px에 위치하며, 가로(X)는 오른쪽 끝, 세로(Y)는 중앙에 해당하는 지점에서 3D 변형이 적용된 .rotator의 입체감을 바라보게 됩니다.

`perspective-origin: center top`

CSS

.container {
    width: 150px; height: 150px;
    border: 3px dashed #663399;
    perspective: 300px; /* perspective 속성으로 지정된 요소가 기준 영역이 됨 */
    perspective-origin: center top; /* 50% 0;과 동일 */
}
.rotator {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 0, 200, .4);
    transform: rotateX(45deg);
}

구현 설명

perspective: 300px이 지정된 .container가 perspective-origin으로 지정할 위치(origin)의 기준 영역이 됩니다.
관찰자는 기준 영역인 점선으로된 .container를 기준으로 거리 300px에 위치하며, 가로(X)는 중앙에, 세로(Y)는 맨 위쪽 끝에 해당하는 지점에서 3D 변형이 적용된 .rotator의 입체감을 바라보게 됩니다.
가로 축 가운데 맨 위에서 내려다 보는 입체감입니다.

`perspective-origin: center bottom`

CSS

.container {
    width: 150px; height: 150px;
    border: 3px dashed #663399;
    perspective: 300px; /* perspective 속성으로 지정된 요소가 기준 영역이 됨 */
    perspective-origin: center bottom; /* 50% 100%;와 동일 */
}
.rotator {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 0, 200, .4);
    transform: rotateX(45deg);
}

구현 설명

perspective: 300px이 지정된 .container가 perspective-origin으로 지정할 위치(origin)의 기준 영역이 됩니다.
관찰자는 기준 영역인 점선으로된 .container를 기준으로 거리 300px에 위치하며, 가로(X)는 중앙에, 세로(Y)는 맨 아래쪽 끝에 해당하는 지점에서 3D 변형이 적용된 .rotator의 입체감을 바라보게 됩니다.
가로 축 가운데 맨 아래에서 내려다 보는 입체감입니다.

`perspective-origin: -50% 50%`

CSS

.container {
    width: 150px; height: 150px;
    border: 3px dashed #663399;
    perspective: 300px; /* perspective 속성으로 지정된 요소가 기준 영역이 됨 */
    perspective-origin: -50% 50%;
}
.rotator {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 0, 200, .4);
    transform: rotateX(45deg);
}

구현 설명

perspective: 300px이 지정된 .container가 perspective-origin으로 지정할 위치(origin)의 기준 영역이 됩니다.
관찰자는 기준 영역인 점선으로된 .container를 기준으로 거리 300px에 위치하며, 가로(X)는 왼쪽 가장자리 기준으로 가로 너비 기준 50%만큼 바깥, 세로(Y)는 위쪽 가장자리 기준으로 세로 높이 기준 50%만큼 안쪽에 해당하는 지점에서 3D 변형이 적용된 .rotator의 입체감을 바라보게 됩니다.

`perspective-origin: -50px 50px`

CSS

.container {
    width: 150px; height: 150px;
    border: 3px dashed #663399;
    perspective: 300px; /* perspective 속성으로 지정된 요소가 기준 영역이 됨 */
    perspective-origin: -50px 50px;
}
.rotator {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 0, 200, .4);
    transform: rotateX(45deg);
}

구현 설명

perspective: 300px이 지정된 .container가 perspective-origin으로 지정할 위치(origin)의 기준 영역이 됩니다.
관찰자는 기준 영역인 점선으로된 .container를 기준으로 거리 300px에 위치하며, 가로(X)는 왼쪽 가장자리 기준으로 50px만큼 바깥, 세로(Y)는 위쪽 가장자리 기준으로 50px만큼 안쪽에 해당하는 지점에서 3D 변형이 적용된 .rotator의 입체감을 바라보게 됩니다.

한 개 값 구문

한 개의 값만 있으면 가로 축 값을 나타내며, 세로 축 값은 무조건 center(또는 50%)로 지정됩니다.

CSS 예제

/* 한 개 값 구문: 가로 축 | 생략한 세로 축은 무조건 center 값 */
perspective-origin: left; /* left center;와 동일 */
perspective-origin: center; /* center center;와 동일 */
perspective-origin: 0; /* left center;와 동일 */
perspective-origin: 20px; /* 20px center;와 동일 */
perspective-origin: 50%; /* center center;와 동일 */

형식 정의

perspective-origin 속성의 형식 정의
초깃값	`50% 50%`
적용 요소	변형 가능한 요소 즉, 요소의 영역인 너비나 높이를 지정할 수 있는 요소
상속	아니오
백분율	요소 자신의 실제 크기(bounding box)를 기준으로 계산
애니메이션	예

브라우저 호환성

perspective-origin 속성의 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`perspective-origin`	36	12	16	9

명세서

perspective-origin 속성의 명세서 사양
명세서 사양
3D Transform Rendering	CSS Transforms Module Level 2 #3d-transform-rendering
`perspective-origin`	CSS Transforms Module Level 2 #perspective-origin-property

참고문헌

MDN - perspective-origin

정의 및 사용 방법

기본 예제

형식 구문

구문

값

가로 축

세로 축

값에 따른 구현 예제

perspective-origin: center center

구현 설명

perspective-origin: left center

구현 설명

perspective-origin: right center

구현 설명

perspective-origin: center top

구현 설명

perspective-origin: center bottom

구현 설명

perspective-origin: -50% 50%

구현 설명

perspective-origin: -50px 50px

구현 설명

한 개 값 구문

형식 정의

브라우저 호환성

명세서

참고문헌

같이 보기

`perspective-origin: center center`

`perspective-origin: left center`

`perspective-origin: right center`

`perspective-origin: center top`

`perspective-origin: center bottom`

`perspective-origin: -50% 50%`

`perspective-origin: -50px 50px`