designs.

안녕하세요, 미래의 웹 디자이너 여러분! 오늘 우리는 CSS 3D 변환의 세계로 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 선생님으로서, 저는 이 fascinatie 주제를 안내해 드리게 되어 매우 기쁩니다. 프로그래밍에 처음이라면 걱정하지 마세요 - 우리는 기본부터 차근차근 진행할 것입니다. 이 수업이 끝나면, 여러분은 웹사이트를 활짝 터트릴 수 있는 3D 걸작을 만들 수 있을 것입니다!

CSS 3D 변환은 무엇인가요?

상상해 보세요. 여러분이 한 장의 종이를 들고 있는 것을. 웹 디자인의 세계에서 그것은 여러분의 일반적인 2D 웹페이지입니다. 그런데 그 종이를 접거나, 돌리거나, 일어서게 만들 수 있었다면 어떨까요? 그게 바로 CSS 3D 변환으로 우리가 웹 요소들과 할 수 있는 일입니다!

CSS 3D 변환은 우리에게 요소를 3차원 공간에서 조작할 수 있는 힘을 줍니다. 우리는 X, Y, Z 축 방향으로 요소를 회전시키고, 이동시키고, 확대/축소할 수 있습니다. Z축은 우리의 디자인에 깊이를 더해주는 축으로, 요소가 더 가까이서 보이거나 더 멀리서 보이게 만듭니다.

무대를 설정하다: 변환 속성

3D 세계로 뛰어들기 전에, transform 속성을 빠르게复習해 보겠습니다. 이 것은 우리가 3D 변환을 적용하는 마법의 지팡이입니다.

.element {
  transform: function(value);
}

이 문법에서, function은 우리가 적용하고 싶은 변환 유형이고, value는 요소를 변환시키고 싶은 정도입니다.

변환 함수들

이제 우리가 사용할 수 있는 주요 3D 변환 함수를 살펴보겠습니다:

함수	설명	예제
translate3d(x,y,z)	요소를 3D 공간에서 이동시킵니다	transform: translate3d(10px, 20px, 30px);
translateZ(z)	요소를 Z축 방향으로 이동시킵니다	transform: translateZ(30px);
scale3d(x,y,z)	요소를 3D 공간에서 확대/축소시킵니다	transform: scale3d(1.5, 1.5, 2);
scaleZ(z)	요소를 Z축 방향으로 확대/축소시킵니다	transform: scaleZ(2);
rotate3d(x,y,z,angle)	요소를 3D 공간에서 회전시킵니다	transform: rotate3d(1, 1, 1, 45deg);
rotateX(angle)	요소를 X축 방향으로 회전시킵니다	transform: rotateX(45deg);
rotateY(angle)	요소를 Y축 방향으로 회전시킵니다	transform: rotateY(45deg);
rotateZ(angle)	요소를 Z축 방향으로 회전시킵니다	transform: rotateZ(45deg);
perspective(n)	시점을 설정합니다	transform: perspective(1000px);

이것이 압도적으로 보일 수 있지만, 우리는 각각을 예제와 함께 설명해 나갈 것입니다!

변환을 시작해보자!

3D 이동

먼저 translate3d를 사용하여 요소를 3D 공간에서 이동시키는 것으로 시작해보겠습니다:

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transform: translate3d(50px, 30px, 20px);
}

이 예제에서, 우리의 상자는 오른쪽으로 50px, 아래로 30px, 시청자 쪽으로 20px 이동합니다. 상자가 화면에서 떠 있는 것처럼 보입니다!

3D 확대/축소

이제 우리의 상자를 확대하거나 축소시키는 것을 시도해보겠습니다:

.box {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  transform: scale3d(1.5, 1.5, 2);
}

이 변환은 우리의 상자를 가로와 세로 방향으로 1.5배로 확대시키고, 깊이 방향으로 2배로 확대시킵니다.

3D 회전

요소를 3D 공간에서 회전시키면 정말 멋진 효과를 만들 수 있습니다:

.box {
  width: 100px;
  height: 100px;
  background-color: #2ecc71;
  transform: rotateX(45deg) rotateY(30deg) rotateZ(60deg);
}

이 상자는 X축 방향으로 45도, Y축 방향으로 30도, Z축 방향으로 60도 회전합니다. 상자가 약간의 춤을 추고 있는 것처럼 보입니다!

시점의 중요성

이제 things가 정말 흥미로워집니다. 3D 변환을 진정으로 감상하기 위해서는 시점을 추가해야 합니다. 시점은 시청자와 객체 사이의 거리를 상상하십시오.

.container {
  perspective: 1000px;
}

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

이 예제에서, 우리는 컨테이너에 시점을 추가했습니다. 이제 상자를 회전시키면 더 3차원적으로 보입니다!

모든 것을 합쳐서: 3D 큐브

이제 우리가 배운 모든 것을 합쳐서 3D 큐브를 만들어보겠습니다:

<div class="scene">
  <div class="cube">
    <div class="face front">Front</div>
    <div class="face back">Back</div>
    <div class="face right">Right</div>
    <div class="face left">Left</div>
    <div class="face top">Top</div>
    <div class="face bottom">Bottom</div>
  </div>
</div>

.scene {
  width: 200px;
  height: 200px;
  perspective: 600px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  line-height: 200px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.front  { background: rgba(255,0,0,0.7);   transform: rotateY(  0deg) translateZ(100px); }
.right  { background: rgba(0,255,0,0.7);   transform: rotateY( 90deg) translateZ(100px); }
.back   { background: rgba(0,0,255,0.7);   transform: rotateY(180deg) translateZ(100px); }
.left   { background: rgba(255,255,0,0.7); transform: rotateY(-90deg) translateZ(100px); }
.top    { background: rgba(255,0,255,0.7); transform: rotateX( 90deg) translateZ(100px); }
.bottom { background: rgba(0,255,255,0.7); transform: rotateX(-90deg) translateZ(100px); }

.cube:hover {
  transform: translateZ(-100px) rotateX(-90deg) rotateY(-45deg);
}

이 코드는 컬러풀한 3D 큐브를 만들어주며, 마우스를 올리면 회전합니다. 정말 멋지죠?

결론

그렇습니다, 여러분! 우리는 CSS 3D 변환의 흥미로운 세계를 여행했습니다. 간단한 이동에서 완전한 3D 큐브를 만드는 것까지, 여러분은 웹 디자인에 깊이와 차원을 더할 수 있는 힘을 얻었습니다.

기억해 두세요, 3D 변환을 완벽하게 습득하는 열쇠는 연습입니다. 다양한 값을 실험해 보지 마세요. 누가 알까요? 웹 디자인의 다음 큰 물결을 만들 수도 있습니다!

이제 끝나는 순간, 저는 유명한 건축가 프랭크 라이드의 말을 떠올립니다: "공간은 예술의 숨결입니다." CSS 3D 변환으로, 여러분은 웹 공간에 생명을 불어넣을 수 있는 도구를 얻었습니다. 그러니 forth 나가서 놀라운 3D 경험을 만들어 보세요!

기쁜 코딩을 기원하며, 여러분의 웹 디자인이 항상 깊이를 가지기를 바랍니다!

Credits: Image by storyset