CSS Flex 및 그리드 레이아웃(코드 포함)을 사용하여 3D 주사위를 구현하는 방법을 단계별로 안내합니다.

프런트엔드 인터뷰에서 CSS를 사용하여 주사위/마작 레이아웃을 구현하는 방법에 대한 질문을 자주 받습니다. 다음 기사에서는 CSS를 사용하여 3D 주사위를 만드는 방법을 소개합니다(Flex 및 Grid 레이아웃은 3D 주사위를 구현함).

다음 문서에서 배울 수 있습니다.

• 변형을 사용하여 3D 모양 구현
• 3D 주사위에 대한 회전 애니메이션 구현
• Flex 레이아웃을 사용하여 주사위 레이아웃 구현 . [추천 학습:
css 동영상 튜토리얼
• ]
1. Flex 레이아웃을 사용하여 6면 구현

먼저 주사위 6면의 HTML 구조를 정의합니다.

<div class="dice-box">
  <div class="dice first-face">
    <span class="dot"></span>
  </div>
  <div class="dice second-face">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="dice third-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="dice fourth-face">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>
  <div class="fifth-face dice">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>
  <div class="dice sixth-face">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>
</div>

다음으로 각 면과 각 점을 구현합니다. 기본 스타일:

.dice {
  width: 200px;  
  height: 200px;  
  padding: 20px;  
  background-color: tomato;
  border-radius: 10%;
}
 
.dot {
   display: inline-block;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: white;
}

구현 효과는 다음과 같습니다.

(1) 원포인트

HTML 구조는 다음과 같습니다.

<div class="dice first-face">
  <span class="dot"></span>
</div>

첫 번째 면을 구현하려면 가로 및 세로 중심만 맞추면 됩니다.

justify-content:center: 점을 주축의 중심(가로)에 정렬합니다.

• align-items:center: 점을 교차축(세로)의 중심에 정렬합니다.
코드는 다음과 같이 구현됩니다.

.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}

첫 번째 변은 이제 다음과 같습니다.

(2) 두 점

HTML 구조는 다음과 같습니다.

<div class="dice second-face">
  <span class="dot"></span>
  <span class="dot"></span>
</div>

먼저, 상위 요소를 설정합니다. 플렉스 레이아웃의 두 번째 측면에 다음 속성을 추가합니다.

justify-content: space-between: 플렉스 컨테이너의 시작과 끝 부분에 하위 요소를 배치합니다.

.second-face {
   display: flex;
   justify-content : space-between;
}

현재 포인트 위치는 다음과 같습니다.

이때 첫 번째 포인트는 올바른 위치인 왼쪽 상단에 있습니다. 그리고 두 번째 점은 오른쪽 하단에 있어야 합니다. 따라서 align-self 속성을 사용하여 두 번째 점의 위치를 ​​개별적으로 조정해 보겠습니다.

align-self: flex-end: 항목을 Flex 컨테이너의 끝에 정렬합니다.

.second-face .dot:nth-of-type(2) {
 align-self: flex-end;
}

이제 두 번째 변은 다음과 같습니다.

(3) 세 점

HTML 구조는 다음과 같습니다.

<div class="dice third-face">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

세 번째 변은 두 번째 변에 또 다른 중심점을 배치하여 얻을 수 있습니다.

align-self: flex-end: Flex 컨테이너의 끝에 항목을 정렬합니다.

• align-self: center: Flex 컨테이너의 중앙에 항목을 정렬합니다.

• .third-face {
   display: flex;
    justify-content : space-between;
  }
   
  .third-face .dot:nth-of-type(2) {
   align-self: center;
  }
   
  .third-face .dot:nth-of-type(3) {
   align-self: flex-end;
  }

이제 세 번째 변은 다음과 같습니다.

첫 번째 점이 오른쪽 위 모서리에 있고 세 번째 점이 왼쪽 아래 모서리에 있도록 하려면 의 align-self를 변경할 수 있습니다. flex-end의 첫 번째 점은 변경되지 않고 두 번째 점은 변경되지 않고 세 번째 점은 설정할 필요가 없으며 기본적으로 가장 왼쪽에 있습니다.

.third-face {
 display: flex;
  justify-content : space-between;
}
 
.third-face .dot:nth-of-type(1) {
 align-self :flex-end;
}
 
.third-face .dot:nth-of-type(2) {
 align-self :center;
}

이제 세 번째 변은 다음과 같습니다.

( 4) 네 점

HTML 구조는 다음과 같습니다:

<div class="dice fourth-face">
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

4 점의 다각형에서는 두 행으로 나눌 수 있으며 각 행에는 두 개의 열이 포함됩니다. 한 행은 flex-start에 있고 다른 행은 flex-end에 있습니다. 그리고 주사위의 왼쪽과 오른쪽에 배치하려면 justify-content:space-between을 추가하세요.

.fourth-face {
 display: flex;
 justify-content: space-between
}

다음으로 점의 두 열을 별도로 레이아웃해야 합니다.

열을 flex 레이아웃으로 설정합니다.

• 점이 수직 방향으로 배치되도록 flex-direction을 열로 설정합니다.
• justify-content 설정 공백으로 이동하면 첫 번째 점이 맨 위에 있고 두 번째 점이 맨 아래에 있게 됩니다.

• .fourth-face .column {
   display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

이제 네 번째 변은 다음과 같습니다:

(5) Five points

HTML 구조는 다음과 같습니다.

<div class="fifth-face dice">
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="column">
    <span class="dot"></span>
  </div>
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

다섯 번째 변과 네 번째 변의 차이점은 추가 항목이 있다는 것입니다. 중간에 점. 따라서 네 번째 변을 기준으로 중간에 열을 추가하면 됩니다.

.fifth-face {
 display: flex;
 justify-content: space-between
}
 
.fifth-face .column {
 display: flex;
  flex-direction: column;
  justify-content: space-between;
}

이제 다섯 번째 변은 다음과 같습니다.

중간 지점도 조정해야 합니다. justify-content를 중앙에 배치하여 수직으로 중앙에 위치하게 합니다:

.fifth-face .column:nth-of-type(2) {
 justify-content: center;
}

이제 다섯 번째 변은 다음과 같습니다:

(6) 여섯 점

HTML 구조는 다음과 같습니다:

<div class="dice sixth-face">
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="column">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

여섯 번째 변의 레이아웃 측면은 네 번째 측면과 거의 정확히 동일합니다. 그러나 각 열에는 하나의 요소가 더 있고 레이아웃은 다음과 같이 구현됩니다.

.sixth-face {
 display: flex;
 justify-content: space-between
}
  
.sixth-face .column {
 display: flex;
  flex-direction: column;
  justify-content: space-between;
}

이제 여섯 번째 측면은 다음과 같습니다.

2. 使用 Grid 布局实现六个面

骰子每个面其实可以想象成一个 3 x 3 的网格，其中每个单元格代表一个点的位置：

+---+---+---+
| a | b | c |
+---+---+---+
| d | e | f |
+---+---+---+
| g | h | i |
+---+---+---+

要创建一个 3 x 3 的网格，只需要设置一个容器元素，并且设置三个大小相同的行和列：

.dice {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}

这里的 fr 单位允许将行或列的大小设置为网格容器可用空间的一部分，这上面的例子中，我们需要三分之一的可用空间，所以设置了 1fr 三次。

我们还可以使用 repeat(3, 1fr) 将 1fr 重复 3 次，来代替 1fr 1fr 1fr。还可以使用定义行/列的grid-template速记属性将上述代码进行简化：

.dice {
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

每个面所需要定义的 HTML 就像是这样：

<div class="dice">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

所有的点将自动放置在每个单元格中，从左到右：

现在我们需要为每个骰子值定位点数。开始时我们提到，可以将每个面分成 3 x 3 的表格，但是这些表格并不是每一个都是我们需要的，分析骰子的六个面，可以发现，我们只需要以下七个位置的点：

+---+---+---+
| a | | c |
+---+---+---+
| e | g | f |
+---+---+---+
| d | | b |
+---+---+---+

我们可以使用grid-template-areas属性将此布局转换为 CSS：

.dice {
  display: grid;
  grid-template-areas:
    "a . c"
    "e g f"
    "d . b";
}

因此，我们可以不使用传统的单位来调整行和列的大小，而只需使用名称来引用每个单元格。其语法本身提供了网格结构的可视化，名称由网格项的网格区域属性定义。中间列中的点表示一个空单元格。

下面来使用grid-area属性为网格项命名，然后，网格模板可以通过其名称引用该项目，以将其放置在网格中的特定区域中。:nth-child()伪选择器允许单独定位每个点。

.dot:nth-child(2) {
    grid-area: b;
}
 
.dot:nth-child(3) {
    grid-area: c;
}
 
.dot:nth-child(4) {
    grid-area: d;
}
 
.dot:nth-child(5) {
    grid-area: e;
}
 
.dot:nth-child(6) {
    grid-area: f;
}

现在六个面的样式如下：

可以看到，1、3、5的布局仍然是不正确的，只需要重新定位每个骰子的最后一个点即可：

.dot:nth-child(odd):last-child {
    grid-area: g;
}

这时所有点的位置都正确了：

对于上面的 CSS，对应的 HTML分别是父级为一个p标签，该面有几个点，子级就有几个span标签。代码如下：

<div class="dice-box">
  <div class="dice first-face">
    <span class="dot"></span>
  </div>
  <div class="dice second-face">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="dice third-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="dice fourth-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="fifth-face dice">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <div class="dice sixth-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

整体的 CSS 代码如下：

.dice {
  width: 200px;  
  height: 200px;  
  padding: 20px;  
  background-color: tomato;
  border-radius: 10%;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  grid-template-areas:
    "a . c"
    "e g f"
    "d . b";
}
 
.dot {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
}
 
.dot:nth-child(2) {
  grid-area: b;
}
 
.dot:nth-child(3) {
  grid-area: c;
}
 
.dot:nth-child(4) {
  grid-area: d;
}
 
.dot:nth-child(5) {
  grid-area: e;
}
 
.dot:nth-child(6) {
  grid-area: f;
}
 
.dot:nth-child(odd):last-child {
  grid-area: g;
}

3. 实现 3D 骰子

上面我们分别使用 Flex 和 Grid 布局实现了骰子的六个面，下面来这将六个面组合成一个正方体。

首先对六个面进行一些样式修改：

.dice {
  width: 200px;  
  height: 200px;  
  padding: 20px;
  box-sizing: border-box;
  opacity: 0.7;
  background-color: tomato;
  position: absolute;
}

定义它们的父元素：

.dice-box {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(185deg) rotateX(150deg) rotateZ(315deg);
}

其中，transform-style: preserve-3d;表示所有子元素在3D空间中呈现。这里的transform 的角度不重要，主要是便于后面查看。

此时六个面的这样的：

看起来有点奇怪，所有面都叠加在一起。不要急，我们来一个个调整位置。

首先将第一个面在 Z 轴移动 100px：

.first-face {
  transform: translateZ(100px);
}

第一面就到了所有面的上方：

因为每个面的宽高都是 200px，所以将第六面沿 Z 轴向下调整 100px：

.sixth-face {
  transform: translateZ(-100px);
}

第六面就到了所有面的下方：

下面来调整第二面，将其在X轴向后移动 100px，并沿着 Y 轴旋转 -90 度：

.second-face {
  transform: translateX(-100px) rotateY(-90deg);
}

此时六个面是这样的：

下面来调整第二面的对面：第五面，将其沿 X 轴的正方向移动 100px，并沿着 Y 轴方向选择 90 度：

.fifth-face {
  transform: translateX(100px) rotateY(90deg);
}

此时六个面是这样的：

下面来调整第三面，道理同上：

.third-face {
  transform: translateY(100px) rotateX(90deg);
}

此时六个面是这样的：

最后来调整第五面：

.fourth-face {
  transform: translateY(-100px) rotateX(90deg);
}

此时六个面就组成了一个完整的正方体：

下面来为这个骰子设置一个动画，让它转起来：

@keyframes rotate {
  from {
    transform: rotateY(0) rotateX(45deg) rotateZ(45deg);
  }
  to {
    transform: rotateY(360deg) rotateX(45deg) rotateZ(45deg);
  }
}
 
.dice-box {
  animation: rotate 5s linear infinite;
}

最终的效果如下：

在线体验：

3D 骰子-Flex：https://codepen.io/cugergz/pen/jOzYGyV

3D 骰子-Grid：https://codepen.io/cugergz/pen/GROMgEe

（学习视频分享：css视频教程、web前端）

위 내용은 CSS Flex 및 그리드 레이아웃(코드 포함)을 사용하여 3D 주사위를 구현하는 방법을 단계별로 안내합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!