CSS 3D Transforms

CSS 3D Transforms: 웹 요소에 3D 변형 효과 적용하기

CSS 3D Transforms는 웹 페이지에서 요소를 3차원 공간에서 이동, 회전, 크기 조절, 기울임 등의 변형을 적용할 수 있는 기술입니다. 2D 변형과 달리, 3D 변형은 깊이를 추가하여 입체감을 더할 수 있습니다. 이 자료에서는 CSS 3D 변형의 주요 속성인 perspective, rotateX, rotateY, translateZ 등을 다루며, 실전에서 3D 효과를 구현하는 방법을 설명하겠습니다.

1. 기본 개념: `transform-style`과 `perspective`

1) `transform-style: preserve-3d`

transform-style 속성은 3D 변형을 적용할 때, 자식 요소가 부모 요소의 3D 공간에서 유지될지 여부를 결정합니다. preserve-3d 값을 사용하면 자식 요소들이 부모 요소의 3D 변환 공간에서 입체적으로 변형됩니다.

.container {
  transform-style: preserve-3d;
}

2) `perspective`: 3D 깊이감 설정

perspective 속성은 카메라 시점에서 요소를 바라보는 것처럼, 깊이(z축)를 설정하여 3D 효과의 강도를 조절합니다. 값이 작을수록 3D 효과가 더 강하게 보이고, 값이 클수록 완만하게 보입니다.

.container {
  perspective: 1000px;
}

perspective: 3D 공간에서의 원근 효과를 설정합니다. 값이 작을수록 원근감이 커지고, 값이 클수록 원근감이 약해집니다.

예시: `perspective`와 3D 회전

.container {
  perspective: 1000px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: coral;
  transform: rotateY(45deg);
}

이 코드는 1000px의 원근감을 적용한 후, 요소를 Y축을 기준으로 45도 회전시켜 입체적인 변형을 적용합니다.

2. `rotateX()`와 `rotateY()`: 요소 회전

*rotateX()*와 rotateY() 함수는 각각 X축과 Y축을 기준으로 요소를 3D 공간에서 회전시킵니다.

1) `rotateX()`: X축을 기준으로 회전

X축을 기준으로 회전할 때는, 요소가 위아래로 회전하는 것처럼 보입니다.

transform: rotateX(angle);

angle: 회전할 각도(단위: deg).

예시: X축을 기준으로 3D 회전

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transform: rotateX(45deg);
}

이 코드는 요소를 X축 기준으로 45도 회전시켜 입체적으로 회전하는 효과를 줍니다.

2) `rotateY()`: Y축을 기준으로 회전

Y축을 기준으로 회전할 때는, 요소가 좌우로 회전하는 것처럼 보입니다.

transform: rotateY(angle);

예시: Y축을 기준으로 3D 회전

.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  transform: rotateY(60deg);
}

이 코드는 요소를 Y축 기준으로 60도 회전시킵니다.

3. `translateZ()`: z축 이동

translateZ() 함수는 요소를 z축(깊이 축)을 기준으로 이동시켜, 화면에 더 가깝거나 멀리 배치하는 효과를 줍니다. 값이 양수이면 화면에서 멀어지고, 음수이면 화면으로 가까워집니다.

기본 구문

transform: translateZ(value);

value: 요소가 z축으로 이동할 거리를 나타냅니다.

예시: z축 이동

.box {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  transform: translateZ(100px);
}

이 코드는 요소를 z축 방향으로 100px 이동시켜 화면에서 멀리 떨어진 것처럼 보이게 합니다.

4. `scaleZ()`: z축에서 크기 조절

scaleZ() 함수는 요소의 크기를 z축 방향으로 확대하거나 축소합니다.

기본 구문

transform: scaleZ(factor);

factor: z축 방향으로 요소의 크기를 조절할 배율.

예시: z축 방향으로 크기 확대

.box {
  width: 100px;
  height: 100px;
  background-color: lightsalmon;
  transform: scaleZ(1.5);
}

이 코드는 요소의 z축 방향 크기를 1.5배로 확대합니다.

5. `perspective-origin`: 원근감의 중심 설정

perspective-origin 속성은 3D 변형에서 원근 효과가 시작되는 지점을 조절합니다. 기본값은 화면의 중심(50% 50%)이지만, 이 값을 변경하면 원근감이 적용되는 위치를 다르게 설정할 수 있습니다.

기본 구문

perspective-origin: x-axis y-axis;

x-axis: 수평 위치(왼쪽, 오른쪽 또는 퍼센트값).
y-axis: 수직 위치(위쪽, 아래쪽 또는 퍼센트값).

예시: 원근감의 중심을 왼쪽으로 이동

.container {
  perspective: 1000px;
  perspective-origin: left top;
}

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transform: rotateY(45deg);
}

이 코드는 원근감의 중심을 왼쪽 상단으로 이동시켜, 요소가 회전할 때 왼쪽을 기준으로 더 입체적으로 보입니다.

6. 다중 3D 변형 함께 사용하기

CSS 3D 변형은 여러 변형을 동시에 적용할 수 있습니다. rotateX(), translateZ()와 같은 여러 변형을 함께 사용할 때는 공백으로 구분해 나열합니다.

예시: 여러 3D 변형 적용

.box {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  transform: rotateX(30deg) translateZ(50px) scale(1.2);
}

이 코드는 요소를 X축으로 30도 회전시키고, z축으로 50px 이동시킨 후, 1.2배로 확대하는 효과를 적용합니다.

7. 실전 예시: 3D 회전 애니메이션

transform 속성을 애니메이션과 결합하여 역동적인 3D 변형 효과를 만들 수 있습니다. 예를 들어, 요소가 계속해서 3D 공간에서 회전하는 애니메이션을 구현할 수 있습니다.

예시: 3D 회전 애니메이션

@keyframes rotate3D {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  animation: rotate3D 3s infinite linear;
}

이 코드는 요소가 3초 동안 X축과 Y축으로 360도 회전하는 애니메이션을 무한 반복하여 적용합니다.

CSS 3D Transforms의 다양한 속성을 설명하며, rotateX, rotateY, translateZ, perspective 등의 3D 변형을 실전 예제와 함께 다룹니다. CSS 3D 변형을 사용하면 웹 페이지에 입체감을 더하고, 흥미로운 시각적 효과를 쉽게 구현할 수 있습니다.

코딩 스쿨 CSS