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

CSS 3D 최적화하기 - transform-style: preserve-3d

반응형

CSS의 transform-style: preserve-3d 소개

CSS 변환을 사용하면 요소를 2D 및 3D 공간에서 회전, 확대/축소, 기울이기 및 이동할 수 있습니다. 3D 변환을 다룰 때 이해해야 할 중요한 속성 중 하나는 transform-style: preserve-3d입니다. 이 속성은 자식 요소가 3D 변환 위치를 유지하도록 하여 더 복잡하고 현실적인 3D 효과를 가능하게 합니다.

transform-style이란?

transform-style 속성은 자식 요소가 2D 또는 3D 공간에서 렌더링될지 여부를 결정합니다. 두 가지 값이 있습니다:

  • flat: 기본값입니다. 자식 요소가 2D로 렌더링되어 3D 변환을 적용해도 기대한 효과가 나타나지 않습니다.
  • preserve-3d: 자식 요소가 3D 공간에서 렌더링되어 3D 변환이 유지됩니다.

문법

element {
  transform-style: preserve-3d;
}

실용적인 예시

예시 1: 기본 3D 회전

다음은 flatpreserve-3d의 차이점을 보여주는 간단한 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D 회전 예제</title>
  <style>
    .container {
      perspective: 800px;
      width: 200px;
      height: 200px;
      position: relative;
      margin: 100px auto;
    }
    .box {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 0;
      left: 0;
      transform: rotateY(45deg);
      background-color: tomato;
      transition: transform 0.5s;
    }
    .flat .box {
      transform-style: flat;
    }
    .preserve-3d .box {
      transform-style: preserve-3d;
    }
    .box:hover {
      transform: rotateY(45deg) translateZ(50px);
    }
  </style>
</head>
<body>
  <h1>3D 회전 예제</h1>
  <div class="container flat">
    <div class="box">Flat</div>
  </div>
  <div class="container preserve-3d">
    <div class="box">Preserve 3D</div>
  </div>
</body>
</html>

이 예제에서는 transform-style: flat을 사용하는 컨테이너와 transform-style: preserve-3d을 사용하는 컨테이너 두 개가 있습니다. 박스를 호버하면, preserve-3d를 사용한 박스는 자식 요소가 3D 위치를 유지하기 때문에 더 뚜렷한 3D 효과를 보여줍니다.

예시 2: 3D 큐브 만들기

더 복잡한 예로 3D 큐브를 만드는 방법을 소개합니다. 이는 3D 공간에서 여러 요소를 배치해야 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D 큐브 예제</title>
  <style>
    .cube {
      width: 100px;
      height: 100px;
      position: relative;
      transform-style: preserve-3d;
      transform: rotateX(30deg) rotateY(45deg);
      animation: rotateCube 10s infinite linear;
    }
    .face {
      position: absolute;
      width: 100px;
      height: 100px;
      background: rgba(255, 0, 0, 0.7);
      border: 1px solid #ccc;
    }
    .front  { transform: translateZ(50px); }
    .back   { transform: rotateY(180deg) translateZ(50px); }
    .left   { transform: rotateY(-90deg) translateZ(50px); }
    .right  { transform: rotateY(90deg) translateZ(50px); }
    .top    { transform: rotateX(90deg) translateZ(50px); }
    .bottom { transform: rotateX(-90deg) translateZ(50px); }

    @keyframes rotateCube {
      from { transform: rotateX(30deg) rotateY(45deg); }
      to { transform: rotateX(30deg) rotateY(405deg); }
    }
  </style>
</head>
<body>
  <h1>3D 큐브 예제</h1>
  <div class="cube">
    <div class="face front">Front</div>
    <div class="face back">Back</div>
    <div class="face left">Left</div>
    <div class="face right">Right</div>
    <div class="face top">Top</div>
    <div class="face bottom">Bottom</div>
  </div>
</body>
</html>

이 예제에서는 여섯 개의 면을 정의하고 translateZrotate 변환을 사용하여 3D 공간에 배치하여 3D 큐브를 만듭니다. .cube 컨테이너에 transform-style: preserve-3d 속성을 적용하여 모든 면이 서로의 3D 위치를 유지하도록 합니다.

결론

transform-style: preserve-3d 속성은 웹 디자인에서 현실적인 3D 효과를 만드는 데 필수적입니다. 자식 요소가 3D 변환 위치를 유지하도록 함으로써 복잡하고 시각적으로 매력적인 3D 구조를 만들 수 있습니다. 미묘한 깊이를 추가하거나 복잡한 3D 객체를 구축하든, transform-style: preserve-3d를 이해하고 활용하는 것은 CSS 변환을 마스터하는 중요한 단계입니다.

반응형

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

CSS 3D 활용하기 - 3D transform  (0) 2024.06.22
CSS 3D 시작하기 - perspective 속성의 이해  (0) 2024.06.22
❤️ 외주/과외 문의
🖥️ 클라우드 메뉴판 : 디지털팝