In front-end interviews, we are often asked how to use CSS to implement dice/mahjong layout. The following article will introduce to you how to use CSS to create a 3D dice (Flex and Grid layout implement 3D dice). I hope it will be helpful to you!

You can learn from this article:

• Use transform to realize 3D shapes;
• Implement rotation animation for 3D dice;
• Use Flex layout to implement dice layout;
• Use Grid layout to implement dice layout. [Recommended learning: css video tutorial]

1. Use Flex layout to implement six sides

First, define the HTML structure of the six sides of the dice:

<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>

Let’s implement the basic style of each surface and each point:

.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;
}

The effect is as follows:

(1 ) A point

HTML structure is as follows:

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

To implement the first face, you only need to center it horizontally and vertically:

• justify- content:center: Aligns the point with the center of the main axis (horizontal).
• align-items:center: Align the point with the center of the cross axis (vertical).

The code is implemented as follows:

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

Now the first side is like this:

(2) Two points

HTML structure is as follows:

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

First set the parent element of the second side to flex layout and add the following attributes:

justify-content: space-between: Place child elements at the beginning and end of the flex container.

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

The current point position is as follows:

At this time, the first point is in the correct position: the upper left corner. And the second point needs to be in the lower right corner. So, let's use the align-self property to individually adjust the position of the second point:

align-self: flex-end: Align the item to the end of the Flex container.

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

Now the second side looks like this:

(3) Three dots

The HTML structure is as follows:

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

The third side can be achieved by placing another center point on the second side.

• align-self: flex-end: Align items to the end of the Flex container.
• align-self: center: Align items to the middle of the Flex container.

.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;
}

Now the third side looks like this:

If you want the first point to be in the upper right corner and the third point to be in the lower left corner corner, you can change the align-self of the first point to flex-end, the second point remains unchanged, and the third point does not need to be set. The default is on the far left:

.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;
}

Now the third side is Like this:

(4) Four points

HTML structure is as follows:

<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>

In the face of four points, you can Divide it into two rows with two columns each. One row will be at flex-start and the other row will be at flex-end . And add justify-content: space-between to place it on the left and right side of the dice.

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

Next, you need to layout the two column points respectively:

• Set the column to flex layout;
• Set flex-direction to column so that the Points are placed vertically
• Set justify-content to space-between, it will make the first point at the top and the second point at the bottom.

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

Now the fourth side looks like this:

(5) Five points

The HTML structure is as follows:

<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>

The difference between the fifth side and the fourth side is that there is an extra dot in the middle. Therefore, you can add a column in the middle based on the fourth side. The style is as follows:

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

Now the fifth side looks like this:

You also need to correct To adjust the middle point, you can set justify-content to center to center it vertically:

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

Now the fifth side looks like this:

(6 ) Six points

HTML structure is as follows:

<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>

The layout of the sixth side is almost exactly the same as the fourth one, except that each column has one more element. The layout is implemented as follows:

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

Now the sixth side is like this:

2. 使用 Grid 布局實(shí)現(xiàn)六個(gè)面

骰子每個(gè)面其實(shí)可以想象成一個(gè) 3 x 3 的網(wǎng)格，其中每個(gè)單元格代表一個(gè)點(diǎn)的位置：

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

要?jiǎng)?chuàng)建一個(gè) 3 x 3 的網(wǎng)格，只需要設(shè)置一個(gè)容器元素，并且設(shè)置三個(gè)大小相同的行和列：

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

這里的 fr 單位允許將行或列的大小設(shè)置為網(wǎng)格容器可用空間的一部分，這上面的例子中，我們需要三分之一的可用空間，所以設(shè)置了 1fr 三次。

我們還可以使用 repeat(3, 1fr) 將 1fr 重復(fù) 3 次，來(lái)代替 1fr 1fr 1fr。還可以使用定義行/列的grid-template速記屬性將上述代碼進(jìn)行簡(jiǎn)化：

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

每個(gè)面所需要定義的 HTML 就像是這樣：

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

所有的點(diǎn)將自動(dòng)放置在每個(gè)單元格中，從左到右：

現(xiàn)在我們需要為每個(gè)骰子值定位點(diǎn)數(shù)。開(kāi)始時(shí)我們提到，可以將每個(gè)面分成 3 x 3 的表格，但是這些表格并不是每一個(gè)都是我們需要的，分析骰子的六個(gè)面，可以發(fā)現(xiàn)，我們只需要以下七個(gè)位置的點(diǎn)：

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

我們可以使用grid-template-areas屬性將此布局轉(zhuǎn)換為 CSS：

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

因此，我們可以不使用傳統(tǒng)的單位來(lái)調(diào)整行和列的大小，而只需使用名稱來(lái)引用每個(gè)單元格。其語(yǔ)法本身提供了網(wǎng)格結(jié)構(gòu)的可視化，名稱由網(wǎng)格項(xiàng)的網(wǎng)格區(qū)域?qū)傩远x。中間列中的點(diǎn)表示一個(gè)空單元格。

下面來(lái)使用grid-area屬性為網(wǎng)格項(xiàng)命名，然后，網(wǎng)格模板可以通過(guò)其名稱引用該項(xiàng)目，以將其放置在網(wǎng)格中的特定區(qū)域中。:nth-child()偽選擇器允許單獨(dú)定位每個(gè)點(diǎn)。

.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;
}

現(xiàn)在六個(gè)面的樣式如下：

可以看到，1、3、5的布局仍然是不正確的，只需要重新定位每個(gè)骰子的最后一個(gè)點(diǎn)即可：

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

這時(shí)所有點(diǎn)的位置都正確了：

對(duì)于上面的 CSS，對(duì)應(yīng)的 HTML分別是父級(jí)為一個(gè)p標(biāo)簽，該面有幾個(gè)點(diǎn)，子級(jí)就有幾個(gè)span標(biāo)簽。代碼如下：

<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. 實(shí)現(xiàn) 3D 骰子

上面我們分別使用 Flex 和 Grid 布局實(shí)現(xiàn)了骰子的六個(gè)面，下面來(lái)這將六個(gè)面組合成一個(gè)正方體。

首先對(duì)六個(gè)面進(jìn)行一些樣式修改：

.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空間中呈現(xiàn)。這里的transform 的角度不重要，主要是便于后面查看。

此時(shí)六個(gè)面的這樣的：

看起來(lái)有點(diǎn)奇怪，所有面都疊加在一起。不要急，我們來(lái)一個(gè)個(gè)調(diào)整位置。

首先將第一個(gè)面在 Z 軸移動(dòng) 100px：

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

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

因?yàn)槊總€(gè)面的寬高都是 200px，所以將第六面沿 Z 軸向下調(diào)整 100px：

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

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

下面來(lái)調(diào)整第二面，將其在X軸向后移動(dòng) 100px，并沿著 Y 軸旋轉(zhuǎn) -90 度：

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

此時(shí)六個(gè)面是這樣的：

下面來(lái)調(diào)整第二面的對(duì)面：第五面，將其沿 X 軸的正方向移動(dòng) 100px，并沿著 Y 軸方向選擇 90 度：

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

此時(shí)六個(gè)面是這樣的：

下面來(lái)調(diào)整第三面，道理同上：

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

此時(shí)六個(gè)面是這樣的：

最后來(lái)調(diào)整第五面：

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

此時(shí)六個(gè)面就組成了一個(gè)完整的正方體：

下面來(lái)為這個(gè)骰子設(shè)置一個(gè)動(dòng)畫(huà)，讓它轉(zhuǎn)起來(lái)：

@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;
}

最終的效果如下：

在線體驗(yàn)：

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

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

（學(xué)習(xí)視頻分享：css視頻教程、web前端）

The above is the detailed content of Take you step by step to implement 3D dice using CSS Flex and Grid layout (with code). For more information, please follow other related articles on the PHP Chinese website!