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 布局實現(xiàn)六個面

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

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

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

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

這里的 fr 單位允許將行或列的大小設置為網(wǎng)格容器可用空間的一部分，這上面的例子中，我們需要三分之一的可用空間，所以設置了 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>

所有的點將自動放置在每個單元格中，從左到右：

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

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

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

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

因此，我們可以不使用傳統(tǒng)的單位來調整行和列的大小，而只需使用名稱來引用每個單元格。其語法本身提供了網(wǎng)格結構的可視化，名稱由網(wǎng)格項的網(wǎng)格區(qū)域屬性定義。中間列中的點表示一個空單元格。

下面來使用grid-area屬性為網(wǎng)格項命名，然后，網(wǎng)格模板可以通過其名稱引用該項目，以將其放置在網(wǎng)格中的特定區(qū)域中。: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;
}

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

可以看到，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. 實現(xiàn) 3D 骰子

上面我們分別使用 Flex 和 Grid 布局實現(xià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 的角度不重要，主要是便于后面查看。

此時六個面的這樣的：

看起來有點奇怪，所有面都疊加在一起。不要急，我們來一個個調整位置。

首先將第一個面在 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前端）

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!