translateZ & z축에 대한 이해

x, y축은 2d와 동일 / z축은 사용자와의 거리

.box가 커져 보이는 것은 .box가 당신에게 다까이 다가왔기때문입니다.

• .box:hover {

  transform: translateZ(0px);

  }

  Result

translate3d

객체의 위치를 x, y, z 방향으로 한번에 정의하여 이동

• .box:hover {

  transform: translate3d(0px, 0px, 0px);

  }

  Result

scale3d

x, y축은 2d와 동일 / 객체의 크기를 x, y, z 방향으로 한번에 정의

• .box:hover {

  transform: perspective(300px) scale3d(0, 0, 0) translateZ(20px);

  }

  Result

css에는 두께라는 개념이 없기 때문에 scale의 z축은 그 자체로는 의미가 없습니다.
perspective와 translateZ를 같이 사용하면 더 깊은 원근감을 표현할 수 있습니다.

rotate X, Y, Z & rotate3d

각 축을 중심으로 회전 / Z는 2D rotate와 동일

• .box:hover {

  transform: perspective(300px) rotateX(0deg);

  }

  Result

• .box:hover {

  transform: perspective(300px)rotateY(0deg);

  }

  Result

• .box:hover {

  transform: rotateZ(0deg);

  }

  Result

• .box:hover {

  transform: rotate3d(0, 0, 0, 0deg);

  }

  Result

회전축은 transform-origin으로 정의된 기준점과 rotate3d(z, y, z, angle)를 통과합니다. 계산이 쉽지 않습니다.
어렵게 생각될 경우 rotateX, rotateY, rotateZ 따로 쓰는편이 계산하기 좋습니다.

Perspective (원근)

3D transform에서 반드시 필요한 원근감의 깊이를 조정합니다.

px의 수치가 낮을수록 원근감은 깊어집니다.

• .box {

  transform: perspective(0px) rotateY(45deg);

  }

  Result

• box

  box

  box

  box

  .box_wrap {

  선언 없음

  }

  .parent {

  선언 없음

  }

  .box {

  transform: perspective(150px) rotateY(50deg);

  }

• box

  box

  box

  box

  .box_wrap {

  선언 없음

  }

  .parent {

  perspective: 150px;

  }

  .box {

  transform: rotateY(45deg);

  }

• box

  box

  box

  box

  .box_wrap {

  perspective: 400px;

  }

  .parent {

  transform: rotateY(50deg);

  }

  .box {

  선언 없음

  }

perspective-origin (원근의 시작점)

transform-origin과 같은 개념으로 반드시 반드시 perspective 속성과 함께 적용해야 합니다.

perspective-origin은 객체 하나하나에 속성을 선언하는 것이 아니라, 모든 객체를 품고 있는 부모 객체 하나에만 선언합니다.

• front

  back

  right

  left

  top

  bottom

  박스 회전하기

  .po_box_wrap {

  perspective-origin:0% 0%;

  }

  Result

transform-style

자식 객체를 3차원 공간에서 어떻게 표현할 지 선택할 수 있습니다.

flat(객체 자신만)과 preserve-3d(자식 객체 포함)가 있으며, 기본 값은 flat입니다.

• .parent {

  transform-style: flat;

  }

  .parent {

  transform-style: preserve-3d;

  }

  .box {

  transform: rotateY(45deg);

  }

  Result

• flat이 선언되면 자식은 3D 공간 값을 가지지 못합니다.
• preserve-3d가 선언되면 자식은 부모의 3D 영역을 공유하여 부모의 각도를 기준으로 3D transform 선언이 작동됩니다.