CSS perspective 속성 – transform의 3D 구현을 위한 원근감 거리 지정

정의 및 사용 방법

perspective 속성은 transform으로 구현되는 3D 변형에서 사용자와 해당 요소 사이의 거리, 즉 원근감 거리를 지정합니다.

perspective 속성은 사용자와 해당 요소가 있는 평면(Z 축) 사이의 가상 거리를 지정합니다.
아래 다이어그램은 perspective 속성이 사용자와 요소 사이의 거리를 시각적으로 어떻게 정의하는지 보여줍니다.

perspective 속성은 사용자와 요소 사이의 원근감 거리를 설정하며, 값이 작으면 3D 요소가 더 크게, 값이 크면 더 작게 보이도록 하여 깊이감을 조절할 수 있습니다.

기본 예제

CSS

.container {
    border: 3px dashed #663399;
    perspective: /* value */
}
.rotator {
    background-color: rgba(255, 0, 200, .4);
    transform: rotateY(30deg);
}

형식 구문

구문

CSS

/* 키워드 값 */
perspective: none;

/* <길이> 값 */
perspective: 200px;
perspective: 50em;
perspective: 20vw;
perspective: 23vh;

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

값

`perspective` 속성의 값
`none`	초깃값임. `transform`으로 구현되는 3D 변형에서 원근감이 적용되지 않습니다. 이 값은 수학적으로 무한대의 `<길이>` 값과 유사합니다. 화면에서 원근감이 없이 평평하게 보입니다.
`<길이>`	사용자와 해당 요소가 있는 평면(Z 축) 사이의 거리를 나타내는 길이 값입니다. 이 값은 해당 요소의 자식에게 3D 변형 원근감을 적용하는 데 사용됩니다. 음수 값은 사용할 수 없습니다. 백분율(%) 값은 사용할 수 없습니다. 값이 `1px`보다 작으면 `1px`로 처리됩니다.

참고하세요!
transform 속성의 값이 none이 아닐 경우, 해당 요소는 새로운 쌓임 맥락(Stacking context)을 생성합니다. 이로 인해 z-index를 사용한 요소의 겹침 순서 또는 주변 요소와의 겹침 순서가 달라지거나, 자식이나 자손 요소의 Containing Block이 재정의될 수 있습니다.

`perspective` 속성의 적용 대상

perspective 속성은 3D 변형을 적용한 자식 요소에 원근감을 적용하는 데 사용됩니다.
즉, 3D 변형을 가진 요소에 원근 효과를 주려면 해당 요소의 부모 요소에 perspective 속성을 지정해야 합니다.

다음은 기본 예제에서 사용했던 HTML과 CSS 코드입니다.

CSS

.container {
    border: 3px dashed #663399;
    perspective: /* value */
}
.rotator {
    background-color: rgba(255, 0, 200, .4);
    transform: rotateY(30deg);
}

이 기본 예제 코드에서도 perspective 속성이 3D 변형을 적용한 요소(.rotator)의 부모 요소(.container)에 적용된 것을 확인할 수 있습니다.

형식 정의

perspective 속성의 형식 정의
초깃값	`none`
적용 요소	변형 가능한 요소 즉, 요소의 영역인 너비나 높이를 지정할 수 있는 요소
상속	아니오
애니메이션	`none` 값: 아니오 `<길이>` 값: 예

`perspective` 속성과 `perspective()` 함수 값의 차이

perspective 속성과 transform 속성의 perspective() 함수 값은 이름이 비슷하지만 적용되는 요소와 원근감 거리의 지정 관점이 서로 다릅니다.

perspective 속성은 부모 요소 기준으로 자식의 3D 변형에 원근감을 부여하는 반면,
transform 속성의 perspective() 함수 값은 3D 변형을 하는 해당 요소 자체를 기준으로 원근감을 부여합니다.

따라서, perspective 속성을 사용하면, 부모 요소가 하나의 공통 관점이 되어 (여러) 자식 요소-각각 3D 변형을 갖는 경우라도-모두 동일한 관점에서 원근감이 표현됩니다.
반면, perspective() 함수 값을 사용하면, 각 요소마다 독립된 관점이 생성되므로 요소별로 서로 다른 원근감이 적용되는 차이가 있습니다.

다음의 예제를 통해 perspective 속성과 perspective() 함수 값의 차이를 확인해보세요.

HTML

<figure>
    <figcaption>부모 요소에 prespective 속성을 지정한 경우</figcaption>
    <div class="parent perspective-parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</figure>
<figure>
    <figcaption>자식 요소에 각각 prespective() 함수 값을 지정한 경우</figcaption>
    <div class="parent perspective-child">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</figure>

CSS

/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/
.parent {
    border: 2px solid blue;
    background-color: gray;
}
.child {
    height: 150px;
    background-color: blue;
}
.perspective-parent { /* 부모 요소에 prespective 속성을 지정 */
    perspective: 800px;
}
.perspective-parent .child {
    transform: rotateX(60deg);
}
.perspective-child .child { /* 자식 요소에 각각 prespective() 함수 값을 지정 */
    transform: perspective(800px) rotateX(60deg);