시각적으로 매력적인 웹사이트를 만드는 것은 방문자의 관심을 끌고 사이트에 머물게 하는 데 매우 중요합니다. 웹 사이트에 깊이와 흥미를 더하는 한 가지 방법은 CSS 3D 변환을 사용하는 것입니다. 이러한 효과를 사용하면 이미지가 더욱 역동적이고 대화형으로 나타나 더 나은 사용자 경험을 제공할 수 있습니다. 이 게시물에서는 CSS 3D 변환을 사용하여 청중을 사로잡을 놀라운 효과를 만드는 방법을 살펴보겠습니다.

3D 변환이란 무엇입니까?

3D 변환을 사용하면 3차원 공간에서 요소를 이동, 회전 및 크기 조정할 수 있습니다. X축과 Y축을 따라 요소를 조작할 수 있는 2D 변환과 달리 3D 변환은 Z축을 추가하여 요소에 깊이를 제공합니다.

기본 3D 변환

1. 3D로 이미지 회전

3D 공간에서 이미지를 회전하면 더욱 역동적인 모습을 얻을 수 있습니다. 방법은 다음과 같습니다.

.rotate-3d {
  transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
  transition: transform 0.5s;
}

.rotate-3d:hover {
  transform: rotateX(0) rotateY(0) rotateZ(0);
}

2. 3D 번역

Z축을 따라 요소를 이동하면 깊이감을 느낄 수 있습니다.

.translate-3d {
  transform: translateZ(50px);
  transition: transform 0.5s;
}

.translate-3d:hover {
  transform: translateZ(0);
}

삼. 3D 축척

3D로 이미지 크기를 조정하면 이미지가 가까워지거나 멀어지는 것처럼 보일 수 있습니다.

.scale-3d {
  transform: scale3d(1.2, 1.2, 1.2);
  transition: transform 0.5s;
}

.scale-3d:hover {
  transform: scale3d(1, 1, 1);
}

3D 변환 결합

더 복잡한 효과를 만들려면 여러 3D 변환을 결합할 수 있습니다. 예를 들어, 이미지를 회전하고 동시에 이동하여 더욱 몰입감 있는 효과를 만들 수 있습니다.

.combined-3d {
  transform: rotateY(45deg) translateZ(50px);
  transition: transform 0.5s;
}

.combined-3d:hover {
  transform: rotateY(0) translateZ(0);
}

관점 추가

3D 효과를 향상시키기 위해 요소에 원근감을 추가할 수 있습니다. Perspective는 Z축이 렌더링되는 방식을 결정하여 3D 효과의 강도를 제어합니다.

.container {
  perspective: 1000px;
}

.perspective-3d {
  transform: rotateY(45deg);
  transition: transform 0.5s;
}

.perspective-3d:hover {
  transform: rotateY(0);
}

JavaScript를 사용한 대화형 3D 변환

보다 고급 상호 작용을 위해 JavaScript를 사용하여 3D 변환을 제어할 수 있습니다. 이를 통해 마우스 움직임과 같은 사용자 동작에 반응하는 효과를 만들 수 있습니다.

.interactive-3d {
  transition: transform 0.1s;
}

.container {
  perspective: 1000px;
}

const interactive3d = document.querySelector('.interactive-3d');

document.addEventListener('mousemove', (e) => {
  const x = (window.innerWidth / 2 - e.pageX) / 20;
  const y = (window.innerHeight / 2 - e.pageY) / 20;

  interactive3d.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;
});

결론

CSS 3D 변환을 사용하면 이미지에 깊이와 상호 작용성을 추가하여 웹 사이트를 더욱 매력적이고 시각적으로 매력적으로 만들 수 있습니다. 3D 공간에서 요소를 회전하거나 크기를 조정하거나 변환하는 경우 이러한 효과를 통해 사용자 경험이 크게 향상될 수 있습니다. 청중을 사로잡을 멋진 3D 효과를 만들기 위해 다양한 조합과 관점을 실험해보세요.