Community Learn Tools Library Leisure
search
English
Home > Web Front-end > CSS Tutorial > body text

Take you step by step to implement 3D dice using CSS Flex and Grid layout (with code)

青灯夜游
Release： 2022-09-23 09:58:10
forward
2220 people have browsed it

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!

Take you step by step to implement 3D dice using CSS Flex and Grid layout (with code)

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>
Copy after login

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;
}
Copy after login

The effect is as follows:

Take you step by step to implement 3D dice using CSS Flex and Grid layout (with code)

(1 ) A point

HTML structure is as follows:

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

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;
}
Copy after login

Now the first side is like this:

Take you step by step to implement 3D dice using CSS Flex and Grid layout (with code)

(2) Two points

HTML structure is as follows: 

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

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;
}
Copy after login

The current point position is as follows:

Take you step by step to implement 3D dice using CSS Flex and Grid layout (with code)

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;
}
Copy after login

Now the second side looks like this:

Take you step by step to implement 3D dice using CSS Flex and Grid layout (with code)

(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>
Copy after login

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;
}
Copy after login

Now the third side looks like this:

Take you step by step to implement 3D dice using CSS Flex and Grid layout (with code)

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;
}
Copy after login

Now the third side is Like this:

Take you step by step to implement 3D dice using CSS Flex and Grid layout (with code)

(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>
Copy after login

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
}
Copy after login

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;
}
Copy after login

Now the fourth side looks like this:

Take you step by step to implement 3D dice using CSS Flex and Grid layout (with code)

(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>
Copy after login

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;
}
Copy after login

Now the fifth side looks like this:

Take you step by step to implement 3D dice using CSS Flex and Grid layout (with code)

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;
}
Copy after login

Now the fifth side looks like this:

Take you step by step to implement 3D dice using CSS Flex and Grid layout (with code)

(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>
Copy after login

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;
}
Copy after login

Now the sixth side is like this:

Take you step by step to implement 3D dice using CSS Flex and Grid layout (with code)

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;
}
Copy after login

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

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

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

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

<div class="dice">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>
Copy after login

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

1Take you step by step to implement 3D dice using CSS Flex and Grid layout (with code)

现在我们需要为每个骰子值定位点数。开始时我们提到，可以将每个面分成 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";
}
Copy after login

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

下面来使用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;
}
Copy after login

现在六个面的样式如下：

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

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

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

对于上面的 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>
Copy after login

整体的 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;
}
Copy after login

3. 实现 3D 骰子

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

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

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

定义它们的父元素：

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

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

此时六个面的这样的：

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

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

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

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

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

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

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

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

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

此时六个面是这样的：

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

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

此时六个面是这样的：

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

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

此时六个面是这样的：

最后来调整第五面：

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

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

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

@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;
}
Copy after login

最终的效果如下：

在线体验：

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!

Related labels：
css flex grid
source：jb51.net
Previous article：Let’s talk about why you shouldn’t rely on CSS 100vh? Next article：CSS tip: Use transition to retain hover state
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
I'm having trouble with a CSS grid where the height isn't what I expected, what mistakes might I be making? I'm currently learning CSS grids and was asked to make this card by breaking it into a gri...
From 2024-04-06 12:52:14
0
1
339
Why does a grid child with a fixed width and a max width of 90% overflow the grid track? Question: My question is very simple, I want to know why the .header element overflows its...
From 2024-04-05 14:33:39
0
1
1426
Ag-Grid: Is it possible to style a row on a timer, rather than based on the data in the row? I need to change the background color of rows after some time. There is a column in the gr...
From 2024-04-03 20:14:05
0
1
360
Bootstrap grid system does not apply The problem occurs again in my project. I have a component ProductCard which I render in H...
From 2024-04-03 18:23:18
0
2
308
Grid template columns not aligning items on rows I'm new to HTML and CSS and I'm trying to create a navigation bar using grid-template-colu...
From 2024-04-03 16:58:18
0
1
370
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template