Führen Sie Sie Schritt für Schritt durch die Implementierung von 3D-Würfeln mit CSS Flex und Grid-Layout (mit Code)

In Front-End-Interviews werden wir oft gefragt, wie man CSS zur Implementierung des Würfel-/Mahjong-Layouts verwendet. Im folgenden Artikel erfahren Sie, wie Sie mit CSS einen 3D-Würfel erstellen (Flex- und Grid-Layout implementieren 3D-Würfel).

Sie können aus diesem Artikel lernen:

• Verwenden Sie die Transformation, um 3D-Formen zu implementieren;
• Verwenden Sie das Flex-Layout, um das Würfellayout zu implementieren . [Empfohlenes Lernen:
CSS-Video-Tutorial
• ]
• 1. Verwenden Sie das Flex-Layout, um sechs Seiten zu implementieren
Definieren Sie zunächst die HTML-Struktur der sechs Seiten des Würfels:

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

Als nächstes implementieren Sie jede Seite und jeden Punkt Grundstil:

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

Der Implementierungseffekt ist wie folgt:

(1) Ein Punkt

HTML-Struktur ist wie folgt:

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

Um das erste Gesicht zu implementieren, müssen Sie es nur horizontal und vertikal zentrieren:

justify-content:center: Richtet den Punkt auf die Mitte der Hauptachse (horizontal) aus.

align-items:center: Richten Sie den Punkt an der Mitte der Querachse (vertikal) aus.

Der Code ist wie folgt implementiert:

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

Jetzt sieht die erste Seite so aus:

(2) Zwei Punkte

HTML-Struktur ist wie folgt:

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

Legen Sie zunächst das übergeordnete Element des fest zweite Seite zum Flex-Layout und fügen Sie die folgenden Attribute hinzu:

justify-content: space-between: Platzieren Sie untergeordnete Elemente am Anfang und Ende des Flex-Containers.

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

Die aktuelle Punktposition ist wie folgt:

Zu diesem Zeitpunkt befindet sich der erste Punkt an der richtigen Position: in der oberen linken Ecke. Und der zweite Punkt muss in der unteren rechten Ecke liegen. Nutzen wir also die Eigenschaft align-self, um die Position des zweiten Punkts individuell anzupassen:

align-self: flex-end: Richtet das Element am Ende des Flex-Containers aus.

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

Jetzt sieht die zweite Seite so aus:

(3) Drei Punkte

Die HTML-Struktur ist wie folgt:

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

Die dritte Seite kann erreicht werden, indem ein weiterer Mittelpunkt auf der zweiten Seite platziert wird.

align-self: flex-end: Gegenstände am Ende des Flex-Containers ausrichten.

align-self: center: Gegenstände in der Mitte des Flex-Containers ausrichten.

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

Jetzt sieht die dritte Seite so aus:

Wenn Sie möchten, dass der erste Punkt in der oberen rechten Ecke und der dritte Punkt in der unteren linken Ecke liegt, können Sie die Ausrichtung von ändern Der erste Punkt soll flexibel sein, der zweite Punkt bleibt unverändert, der dritte Punkt muss nicht festgelegt werden und befindet sich standardmäßig ganz links:

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

Jetzt sieht die dritte Seite so aus:

( 4) Vier Punkte

HTML-Struktur ist wie folgt:

<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 einem Polygon mit vier Punkten kann es in zwei Zeilen unterteilt werden, wobei jede Zeile zwei Spalten enthält. Eine Reihe befindet sich am Flex-Start und die andere Reihe am Flex-End. Und fügen Sie justify-content: space-between hinzu, um es auf der linken und rechten Seite des Würfels zu platzieren.

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

Als nächstes müssen Sie die beiden Punktspalten entsprechend anordnen:

Stellen Sie die Spalte auf Flex-Layout ein;

Legen Sie die Flexrichtung für die Spalte fest, sodass die Punkte in vertikaler Richtung platziert werden.

• Legen Sie den Ausrichtungsinhalt fest zu space-between, wodurch der erste Punkt oben und der zweite Punkt unten entsteht.

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

Jetzt sieht die vierte Seite so aus:

(5) Fünf Punkte

Die HTML-Struktur ist wie folgt:

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

Der Unterschied zwischen der fünften und der vierten Seite besteht darin, dass es ein Extra gibt Punkt in der Mitte. Daher können Sie eine Spalte in der Mitte basierend auf der vierten Seite hinzufügen. Der Stil ist wie folgt:

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

Jetzt sieht die fünfte Seite so aus:

Sie müssen auch den Mittelpunkt anpassen justify-content so zentrieren, dass er vertikal zentriert ist:

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

Jetzt sieht die fünfte Seite so aus:

(6) Sechs Punkte

Die HTML-Struktur ist wie folgt:

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

Das Layout der sechsten Die Seite ist fast genau die gleiche wie die vierte, nur hat jede Spalte ein weiteres Element und das Layout ist wie folgt implementiert:

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

Jetzt sieht die sechste Seite so aus:

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前端）

Das obige ist der detaillierte Inhalt vonFühren Sie Sie Schritt für Schritt durch die Implementierung von 3D-Würfeln mit CSS Flex und Grid-Layout (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!