Vous guidez étape par étape pour implémenter des dés 3D à l'aide de la disposition CSS Flex et Grid (avec code)-tutoriel CSS-php.cn

Dans les entretiens front-end, on nous demande souvent comment utiliser CSS pour implémenter la disposition des dés/mahjong. L'article suivant vous présentera comment utiliser CSS pour créer un dé 3D (les mises en page Flex et Grid implémentent des dés 3D). J'espère que cela vous sera utile !

Vous guidez étape par étape pour implémenter des dés 3D à l'aide de la disposition CSS Flex et Grid (avec code)

Vous pouvez apprendre de cet article :

Utilisez la transformation pour implémenter des formes 3D ;
Utilisez la disposition en grille pour implémenter la disposition des dés ; . [Apprentissage recommandé :
]
1. Utilisez la mise en page Flex pour implémenter six faces

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

Copier après la connexion

Ensuite, implémentez chaque face et chaque point. style de base :

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

Copier après la connexion

L'effet d'implémentation est le suivant :

(1) Un point

Vous guidez étape par étape pour implémenter des dés 3D à laide de la disposition CSS Flex et Grid (avec code) La structure HTML est la suivante :

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

Copier après la connexion

Pour implémenter la première face, il vous suffit de la centrer horizontalement et verticalement :

justify-content:center : Aligne le point au centre de l'axe principal (horizontal).

align-items:center : Alignez le point avec le centre de l'axe transversal (vertical).

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

Copier après la connexion

(2) Deux points

Vous guidez étape par étape pour implémenter des dés 3D à laide de la disposition CSS Flex et Grid (avec code) La structure HTML est la suivante :

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

Copier après la connexion

Tout d'abord, définissez l'élément parent du deuxième côté pour flex layout et ajoutez les attributs suivants :

justify-content: space-between : placez les éléments enfants au début et à la fin du conteneur flex.

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

Copier après la connexion

La position actuelle du point est la suivante :

A ce moment, le premier point est dans la bonne position : le coin supérieur gauche. Et le deuxième point doit être dans le coin inférieur droit. Utilisons donc la propriété align-self pour ajuster individuellement la position du deuxième point :

Vous guidez étape par étape pour implémenter des dés 3D à laide de la disposition CSS Flex et Grid (avec code) align-self: flex-end : Alignez l'élément à la fin du conteneur Flex.

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

Copier après la connexion

Maintenant, le deuxième côté ressemble à ceci :

(3) Trois points

Vous guidez étape par étape pour implémenter des dés 3D à laide de la disposition CSS Flex et Grid (avec code) La structure HTML est la suivante :

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

Copier après la connexion

Le troisième côté peut être obtenu en plaçant un autre point central sur le deuxième côté.

align-self: flex-end : alignez les éléments à l'extrémité du conteneur Flex.

align-self: center : alignez les éléments au milieu du conteneur 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;
}

Copier après la connexion

Si vous voulez que le premier point soit dans le coin supérieur droit et le troisième point dans le coin inférieur gauche, vous pouvez modifier l'alignement de le premier point à flex- end, le deuxième point reste inchangé, le troisième point n'a pas besoin d'être défini et est à l'extrême gauche par défaut :

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

Copier après la connexion

Vous guidez étape par étape pour implémenter des dés 3D à laide de la disposition CSS Flex et Grid (avec code)

Maintenant, le troisième côté ressemble à ceci :

( 4) Quatre points

Vous guidez étape par étape pour implémenter des dés 3D à laide de la disposition CSS Flex et Grid (avec code) La structure HTML est la suivante :

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

Copier après la connexion

Dans un polygone de quatre points, il peut être divisé en deux lignes, chaque ligne contenant deux colonnes. Une ligne sera à flex-start et l'autre ligne sera à flex-end . Et ajoutez submit-content: space-between pour le placer sur les côtés gauche et droit des dés.

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

Copier après la connexion

Ensuite, vous devez disposer respectivement les deux colonnes de points :

Définissez la colonne sur une disposition flexible

Définissez la direction flexible sur la colonne afin que les points soient placés dans la direction verticale

Définissez le contenu justifié ; à l'espace entre, ce qui fera le premier point en haut et le deuxième point en bas.

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

Copier après la connexion

(5) Cinq points

Vous guidez étape par étape pour implémenter des dés 3D à laide de la disposition CSS Flex et Grid (avec code) La structure HTML est la suivante :

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

Copier après la connexion

La différence entre la cinquième face et la quatrième face est qu'il y a un extra point au milieu. Par conséquent, vous pouvez ajouter une colonne au milieu en fonction du quatrième côté. Le style est le suivant :

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

Copier après la connexion

Maintenant, le cinquième côté est comme ceci :

Vous devez également ajuster le point central. justifier le contenu pour le centrer afin qu'il soit centré verticalement :

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

Copier après la connexion

Maintenant, le cinquième côté ressemble à ceci :

(6) Six points

Vous guidez étape par étape pour implémenter des dés 3D à laide de la disposition CSS Flex et Grid (avec code) La structure HTML est la suivante :

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

Copier après la connexion

La disposition du sixième le côté est presque exactement le même que le quatrième, seulement. Cependant, chaque colonne a un élément supplémentaire et la disposition est implémentée comme suit :

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

Copier après la connexion

Maintenant, le sixième côté ressemble à ceci :

Vous guidez étape par étape pour implémenter des dés 3D à laide de la disposition CSS Flex et Grid (avec 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;
}

Copier après la connexion

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

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

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

Copier après la connexion

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

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

Copier après la connexion

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

1Vous guidez étape par étape pour implémenter des dés 3D à laide de la disposition CSS Flex et Grid (avec 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";
}

Copier après la connexion

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

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

Copier après la connexion

现在六个面的样式如下：

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

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

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

3. 实现 3D 骰子

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

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

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

Copier après la connexion

定义它们的父元素：

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

Copier après la connexion

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

此时六个面的这样的：

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

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

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

Copier après la connexion

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

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

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

Copier après la connexion

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

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

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

Copier après la connexion

此时六个面是这样的：

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

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

Copier après la connexion

此时六个面是这样的：

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

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

Copier après la connexion

此时六个面是这样的：

最后来调整第五面：

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

Copier après la connexion

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

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

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

Copier après la connexion

最终的效果如下：