Perspective란?

원근법은 눈으로 보는 3차원의 세계를 2차원의 평면으로 옮길 때, 일정한 시점에서 본 것 그대로 멀고 가까운 거리감을 느낄 수 있도록 표현하는 회화 기법이다. 

위키백과

Perspective를 사용하여 콘텐츠에 3차원 공간을 만들어 Element를 3D 효과를
적용할 수 있다. Perspective 적용은 2가지 방법을 제공한다.

.parent{
    transform: perspective(500px);
}

<div class="parent"><div>

2. perspective(부모)를 독립적으로 사용한다.(부모와 자식관계)

.parent{
    perspective(500px);
}
.parent .children{
    transform-style: preserve-3d;
    transform: rotateY(60deg);
}

<div class="parent">
    <div class="children"></div>
<div>

지원브라우저

지원 브라우저 확인하기

코드소개

코드소스

CSS 주석 /* 구현 */ 내용만 확인

.view {
    position: relative;
    width: 100%;
    height: 350px;
    border: 1px solid darkcyan;
}

.guide-3d-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 250px;
    height: 250px;
}

.guide-3d {
    position: relative;
    width: 250px;
    height: 250px;
    perspective: 500px;
}
.guide-3d .x {
    display: block;
    width: 100%;
    height: 0;
    border: 1px dashed red;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.guide-3d .y {
    display: block;
    width: 0;
    height: 100%;
    border: 1px dashed green;

    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}
.guide-3d .center {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: black;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.box-wrap {
    /* Layout Style */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border: 1px solid darkgoldenrod;

    /* 구현 */
    perspective: 500px;
}
.box-children {
    /* Layout Style */
    width: 200px;
    height: 200px;
    background-color: darkkhaki;

    /* 구현 */
    transform-style: preserve-3d;
    transform: rotateY(60deg);
}

<div class="view">
    <div class="guide-3d-wrap">
    <div class="guide-3d">
        <span class="x"></span>
        <span class="y"></span>
        <span class="center"></span>
    </div>
    </div>

    <div class="box-wrap">
    <div class="box-children"></div>
    </div>
</div>

결과물

Perspecitve Sample