CSS만으로 3차원 객체를 만드는 방법

더 나은 웹 개발자가 되려면 계속 도전하고 새로운 것을 계속 배워야 합니다. 고맙게도 Matise에는 비판적 사고를 하고 자가격리 중에도 항상 새로운 기술에 호기심을 보이는 놀라운 동료들이 있습니다. 지난 주에 나는 예를 들어 Observer API에 대해 배웠고 우리 프로젝트 중 두 개에서 그것을 구현했습니다. 이번 주에는 CSS로 객체를 3차원으로 만드는 방법을 알고 싶었고, 재미를 유지하기 위해 객체로 TARDIS를 사용했습니다.

스타일 변환 및 Z축 변환

물론 더 간단하게 시작했습니다. 나는 약간의 조사를 했고 3d 개체를 만드는 데 사용할 수 있는 몇 가지 CSS 속성이 있다는 것을 발견했습니다.


가장 중요한 것 중 하나는 transform-style입니다. 기본값은 flat이지만 큐브가 큐브가 되려면 preserve-3d;로 설정해야 합니다. 그렇지 않으면 측면이 서로의 위에 쌓일 것입니다.
perspective 속성을 사용하면 길이 값을 추가하여 객체가 Z 평면에서 얼마나 떨어져 있는지 결정할 수 있습니다. 원근감의 양을 늘리면 개체가 멀리 있는 것처럼 보입니다. There's also a difference between the perspective property and perspective transform function , 솔직히 말해서 여전히 약간 불분명합니다.

마지막으로 필요한 속성은 rotateY 및 rotateX 와 같은 여러 변형 함수를 허용하는 transform 속성이지만 요소당 z축에 위치를 할당하는 매우 중요한 속성translateZ도 있습니다.

회전을 사용하면 다른 관점을 만들고 큐브의 일부를 볼 수 있습니다.

.cube {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-5deg) rotateY(1turn);
  // using a linear animation easing
  // to create an infinitely spinning cube
  animation: turn 12s linear infinite;

큐브에는 6개의 면이 있으므로(당신이 아닌 한 hehehehe) 모두 10x10em인 6개의 div를 추가해야 했습니다. 어떻게든 translateZ를 측면 너비의 절반으로 설정하면 예쁜 핫핑크 큐브가 생성됩니다.

  .side {
    position: absolute;
    width: 10em;
    height: 10em;
    background: hotpink;
    &.front {
      transform: translateZ(5em);
    }
    &.top {
      transform: rotateX(90deg) translateZ(5em);
    }
    &.right {
      transform: rotateY(90deg) translateZ(5em);
    }
    &.left {
      transform: rotateY(-90deg) translateZ(5em);
    }
    &.bottom {
      transform: rotateX(-90deg) translateZ(5em);
    }
    &.back {
      transform: rotateY(-180deg) translateZ(5em);
    } 
  }
}

공간의 시간과 상대적 차원

큐브를 성공적으로 생성한 후에는 실제 거래를 할 때라고 생각했습니다. 타디스. I created a TARDIS before 그러나 타디스가 회전해야 한다는 것을 모두가 알고 있기 때문에 차원이 하나뿐이어서 충분하지 않았습니다.

TARDIS는 큐브보다 조금 더 복잡하지만 원리는 동일합니다. 부모 요소에 perspective: 800px;를 설정하고 컨테이너 요소에 transform-style: preserve-3d;를 설정하고 6면을 추가하여 변환합니다.


내가 가장 힘들었던 점은 지붕과 부모 요소에 translateZ를 설정하면 자식 요소가 더 이상 z축에서 번역할 수 없다는 사실이었습니다. Orrrr 내가 뭔가 잘못하고 있었어, 뭔지 알면 알려줘.

당신도 할 수 있습니다!

CSS로 3차원적인 것을 만들면 알려주세요. Doctor Who에서 나온 것이라면 보너스 포인트입니다. :)