18. perspective (원근법)

perspective - CSS: Cascading Style Sheets | MDN

원근법을 이용하면 좀 더 다양한 예제를 실행할 수 있습니다. 우선 예제 하나 보고 시작하도록 하겠습니다.

여기서 카드가 저 멀리서 앞으로 튀어나오는 원근감은 perspective 800px이 들어있기 때문입니다.

perspective 속성은 컨테이너로 하여금 자식들에게 원근감을 부여하는 효과가 있습니다.

.cont-card {
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 800px;
}

원근감이 있고 없고의 차이를 실습하도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <style>
        .container {
            position: relative;
            width: 500px;
            height: 500px;
            margin-top: 500px;
            margin-left: 500px;
        }

        .y {
            position: absolute;
            transform: rotate(270deg);
            top: -300px;
            left: -250px;
            width: 500px;
        }

        .z {
            position: absolute;
            transform: rotate(140deg);
            top: 78px;
            left: -352px;
            width: 400px;
        }

        .line {
            display: flex; 
            gap: 0.5em;
            align-items: center;
            margin: 50px 0;
        }

        .line::before {
            content: ' '; 
            flex-grow: 1;
            height: 3px;
            background-color: black;
        }
        
        .box-container{
            /* 주석을 풀어보세요. */
            /* perspective: 500px; */
            position: relative;
            top: -260px;
            width: 200px;
            height: 200px;
            background-color: darkcyan;
            opacity: 0.3;
        }
        .box {
            position: absolute;
            top: -20px;
            left: 0;
            width: 220px;
            height: 220px;
            background-color: black;
            opacity: 0.7;
            /* Chrome 개발자 도구 열어서 수치를 증가시켜보세요. */
            transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="line x">line x</div>
        <div class="line y">line y</div>
        <div class="line z">line z</div>
        <div class="box-container">
            <div class="box"></div>
        </div>
    </div>
</body>
</html>

<aside> 💡 translate3d translate 속성의 3D 버전입니다. 한번에 x, y, z 축을 모두 설정하는 것이 가능하며 3D 환경을 랜더링 하는 성능이 기존의 translate 속성보다 뛰어납니다. 참고로 scale, rotate 속성역시 scale3d, rotate3d 가 존재합니다.

</aside>

간단한 실습을 해보도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>perspective</title>
    <style>
        .원본 {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            margin: 100px auto;
            perspective: 400px;
        }

        .회전패널 {
            width: 200px;
            height: 200px;
            background: aqua;
            /* 실습 1 */
            /* transform: rotate(45deg); */

            /* 실습 2 perspective를 준것과 주지 않은것을 비교해보세요. */
            /* transform: rotateX(45deg); */

            /* 실습 3 perspective를 준것과 주지 않은것을 비교해보세요.*/
            /* transform: rotateY(45deg); */
        }
    </style>
</head>
<body>
    <div class="원본">
        <div class="회전패널"></div>
    </div>
</body>
</html>

X축과 Y축, Z축 회전은 아래 그림을 참고해주세요.

어때요? 감이 오시나요? perspective는 우리가 대상을 보는 거리입니다. 라이켓이 저 사각형을 보는 거리라고 생각해주세요. 값이 적을수록 더 가까이 보게 되므로, 효과가 더 극적으로 나타나게 됩니다.