본문 바로가기
UX 개발/CSS - 3D

CSS 3D 시작하기 - perspective 속성의 이해

반응형

주요 참고자료

CSS perspective

CSS에서 perspective 속성은 3D 변환된 요소에 원근감을 적용하는 데 사용됩니다. 이는 요소가 뒤로 물러나거나 앞으로 나오는 것처럼 보이게 하여 깊이감을 만듭니다.

주요 포인트:

  1. perspective 속성: 모든 자식 요소들이 보이는 관점을 정의합니다. 값이 낮을수록 시점이 요소에 더 가까워지며, 따라서 3D 효과가 더욱 두드러집니다.
  2. perspective-origin 속성: 원근 속성의 원점을 설정합니다. 이는 사용자가 보는 위치를 정의합니다. 기본값은 50% 50% (중앙)입니다.

구문:

/* 요소의 자식에게 원근감을 적용 */
.element {
    perspective: 600px;
}

/* 원근감의 원점을 설정 */
.element {
    perspective-origin: 50% 50%;
}

실용적인 예제:

예제 1: 기본 3D 변환

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            perspective: 600px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: tomato;
            transform: rotateY(45deg);
            transition: transform 0.5s;
        }
        .box:hover {
            transform: rotateY(0deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

설명: .container는 자식 요소 .box에 영향을 주는 perspective600px로 설정합니다. .box를 마우스로 가리키면 Y축을 기준으로 회전하여 3D 효과가 나타납니다.

예제 2: 여러 요소와 함께하는 원근감

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .scene {
            perspective: 800px;
            perspective-origin: 50% 50%;
        }
        .card {
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            transition: transform 0.5s;
        }
        .card:hover {
            transform: rotateY(180deg);
        }
        .face {
            position: absolute;
            width: 200px;
            height: 200px;
            backface-visibility: hidden;
        }
        .front {
            background-color: lightcoral;
        }
        .back {
            background-color: lightblue;
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="scene">
        <div class="card">
            <div class="face front">Front</div>
            <div class="face back">Back</div>
        </div>
    </div>
</body>
</html>

설명: 이 예제는 플립 카드 효과를 만듭니다. .scene.cardperspective를 제공합니다. .card는 자식 요소에 3D 변환을 유지하기 위해 transform-style: preserve-3d를 사용합니다. 마우스를 가리키면 카드가 Y축을 기준으로 180도 회전하여 뒷면을 드러냅니다.

팁:

  • perspective 값은 양수여야 하며, 일반적으로 100px에서 1000px 사이의 값을 사용하여 원하는 깊이 효과를 얻을 수 있습니다.
  • perspective-origin을 사용하여 사용자가 보는 위치를 제어할 수 있습니다. 예를 들어, perspective-origin: left는 사용자가 왼쪽에서 보는 것처럼 보이게 합니다.
  • transform 속성의 3D 함수인 rotateX, rotateY, rotateZ, translateZ와 함께 사용하여 다양한 3D 효과를 만들 수 있습니다.

결론:

perspective 속성은 CSS에서 3D 효과를 생성하고 디자인에 깊이를 더하며 상호작용을 증가시키는 강력한 도구입니다. perspective 값을 조정하고 3D 변환과 결합하여 다양한 놀라운 시각 효과를 얻을 수 있습니다.

반응형

'UX 개발 > CSS - 3D' 카테고리의 다른 글

CSS 3D 최적화하기 - transform-style: preserve-3d  (0) 2024.06.22
CSS 3D 활용하기 - 3D transform  (0) 2024.06.22
❤️ 외주/과외 문의
🖥️ 클라우드 메뉴판 : 디지털팝