CSS 3D 큐브

이 짧은 튜토리얼에서는 CSS로 3d 큐브를 만드는 것이 얼마나 쉬운지 보여드리겠습니다.

HTML

여기 HTML 파일에는 래퍼 ID가 있는 상위 div와 큐브 클래스가 있는 하위 div가 있습니다. 그리고 마침내 육면체의 6단계를 나타내는 6개의 하위 div가 있습니다.

<div id="wrapper">
  <div class="cube">
    <!--Front-->
    <div></div>
    <!--Back-->
    <div></div>
    <!--Left-->
    <div></div>
    <!--Right-->
    <div></div>
    <!--Top-->
    <div></div>
    <!--Bottom-->
    <div></div>
  </div>
</div>

CSS

CSS에서 먼저 id #wrapper를 대상으로 부모 div의 스타일을 설정하고 클래스 .cube를 대상으로 자식 div의 스타일을 설정합니다.

래퍼의 경우 너비와 높이를 300px로 설정하고 여백을 100px auto로 설정하여 페이지 중앙에 div를 배치하고 상단에서 100px 떨어져 있습니다.

큐브의 경우 위치를 상대적으로 설정하고 너비와 높이를 150px로 설정합니다. 또한 X축과 Y축 모두에 어느 정도 회전을 적용하여 3D 개체처럼 보이게 합니다.

#wrapper{
  width:300px;
  height:300px;
  perspective:700px;
  -webkit-perspective:700px;
  margin:100px auto;
}

.cube{
  position:relative;
  width:150px;
  height:150px;
  transform-style:preserve-3d;
  transform:rotateY(35deg) rotatex(-38deg);
}

위의 두 가지 스타일에는 브라우저에서 3D 공간을 만들 수 있는 두 가지 새로운 속성이 있습니다.

Perspective create 3d space in our browser.Lower the value higher the 3d depth will be.

We're using transform-style which is common property but we set its value to preserve-3d which will set all the children of .cube in 3d space.

이제 우리가 만들고 있는 3D 큐브의 마지막 부분입니다.

.cube div{
  position:absolute;
  width:150px;
  height:150px;
  background:rgba(0,0,0,0.1);
}

여기에서 먼저 모든 하위 div를 대상으로 하고 모든 div의 위치를 ​​절대 위치로 설정한 다음 div의 높이와 너비를 100%로 설정합니다. 즉, (150px * 150px) .

Z'축에 하위 div 배치

지금 우리는 동일한 Z축에 모든 하위 div가 서로 위에 있습니다. 3d 공간의 가장 좋은 부분은 항목을 서로 다른 Z축에 배치할 수 있다는 것입니다.

이것이 Z'axis의 모습입니다.



이제 정육면체를 만들기 위해 각 자식의 위치를 ​​설정하는 CSS 작업을 해봅시다.

.cube div:nth-child(1){
  transform:translateZ(75px);
  background:#237A57;
}

.cube div:nth-child(2){
  transform: rotateX(180deg) translateZ(75px);
  background:#005AA7;
}

.cube div:nth-child(3){
  transform: rotateY(-90deg) translateZ(75px);
  background:#DA4453;
}

.cube div:nth-child(4){
  transform:rotateY(90deg) translateZ(75px);
  background:#a8c0ff;
}

.cube div:nth-child(5){
  transform: rotateX(90deg) translateZ(75px);
  background:#fc4a1a;
}

.cube div:nth-child(6){
  transform:rotateX(-90deg) translateZ(75px);
  background:#f7b733;
}

여기서 우리는 nth-child라는 의사 선택기로 각 자식 div를 대상으로 지정하고 스타일을 지정하려는 div의 위치를 ​​전달합니다.

모든 div의 Z축을 큐브 너비의 절반인 75px로 설정했습니다. 즉, 150/2 = 75px입니다. 그리고 모든 자식 요소에 대해 Z축을 설정한 후에는 큐브를 형성하기 위해 Z축의 올바른 위치에 rotateX 및 rotateY를 사용하여 각 div를 배치합니다.

If you don't give a Z-axis value to the child div's than all those div's will rotate on same Z-axis(0 by default) which will create an image shown above.

내 펜 :