Membawa anda langkah demi langkah untuk melaksanakan dadu 3D menggunakan CSS Flex dan susun atur Grid (dengan kod)

Dalam temu bual bahagian hadapan, kami sering ditanya cara menggunakan CSS untuk melaksanakan susun atur dadu/mahjong. Artikel berikut akan memperkenalkan anda kepada kaedah menggunakan CSS untuk mencipta dadu 3D (lentur dan susun atur Grid untuk melaksanakan dadu 3D, saya harap ia akan membantu anda!

Melalui artikel ini anda boleh belajar:

• Gunakan transformasi untuk mencapai bentuk 3D; ;
• Gunakan reka letak Flex untuk melaksanakan reka letak dadu; [Pembelajaran yang disyorkan:
tutorial video css
• ]
• 1 Gunakan reka letak Flex untuk melaksanakan enam sisi
Pertama, tentukan struktur HTML bagi enam sisi. dadu:

Berikut ialah gaya asas setiap permukaan dan setiap titik:

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

Kesannya adalah seperti berikut:

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

(1) Satu titik

Struktur HTML adalah seperti berikut:

Untuk melaksanakan muka pertama, anda hanya perlu memusatkannya secara mendatar dan menegak:

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

justify-content:center: Jajarkan titik dengan pusat paksi utama (mendatar).

align-item:center: Menjajarkan titik dengan pusat paksi silang (menegak).

• Kod tersebut dilaksanakan seperti berikut:

Sekarang bahagian pertama adalah seperti ini:

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

(2 ) Dua Klik

Struktur HTML adalah seperti berikut:

Mula-mula tetapkan elemen induk sebelah kedua kepada reka letak lentur dan tambahkan atribut berikut:

justify -kandungan: ruang-antara: Letakkan elemen kanak-kanak pada permulaan dan akhir bekas fleksibel.

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

Kedudukan titik semasa adalah seperti berikut:

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

Pada masa ini, titik pertama berada di kedudukan yang betul: sudut kiri atas. Dan titik kedua perlu berada di sudut kanan bawah. Oleh itu, mari kita gunakan atribut align-self untuk melaraskan kedudukan titik kedua secara individu:

align-self: flex-end: Jajarkan item ke hujung bekas Flex.

Kini bahagian kedua kelihatan seperti ini:

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

(3) Tiga mata

Struktur HTML adalah seperti berikut:

Sebelah ketiga boleh dicapai dengan meletakkan satu lagi titik tengah di sebelah kedua.

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

align-self: flex-end: Jajarkan item ke hujung bekas Flex.

align-self: center: Jajarkan item ke tengah bekas Flex.

• Kini bahagian ketiga kelihatan seperti ini:

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

Jika anda mahu titik pertama berada di sudut kanan atas, titik ketiga Di sudut kiri bawah, anda boleh menukar align-self titik pertama kepada flex-end, titik kedua kekal tidak berubah, dan titik ketiga tidak perlu ditetapkan Lalai adalah di hujung kiri:

Kini Bahagian ketiga adalah seperti ini:

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

(4) Empat mata

Struktur HTML adalah seperti berikut:

dalam empat Poligon titik boleh dibahagikan kepada dua baris, setiap baris mengandungi dua lajur. Satu baris akan berada di flex-start dan satu lagi baris berada di flex-end . Dan tambahkan justify-content: ruang-antara untuk meletakkannya di sebelah kiri dan kanan dadu.

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

Seterusnya, anda perlu susun atur dua titik lajur masing-masing:

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

Tetapkan lajur kepada reka letak lentur

Tetapkan arah lentur kepada lajur, Untuk meletakkan mata secara menegak

• tetapkan justify-content ke ruang-antara, ia akan menjadikan titik pertama di bahagian atas dan titik kedua di bahagian bawah.
• Kini bahagian keempat kelihatan seperti ini:

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

(5) Lima mata

Struktur HTML ialah seperti berikut :

Perbezaan antara bahagian kelima dan bahagian keempat ialah terdapat mata tambahan di bahagian tengah. Oleh itu, anda boleh menambah lajur di tengah berdasarkan bahagian keempat Gayanya adalah seperti berikut:

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

Kini bahagian kelima kelihatan seperti ini:

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

Juga Jika anda perlu melaraskan titik tengah, anda boleh menetapkan justify-content ke tengah untuk memusatkannya secara menegak:

Sekarang bahagian kelima kelihatan seperti ini:

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

(6) Enam mata

Struktur HTML adalah seperti berikut:

Susun atur sisi keenam hampir sama dengan sisi keempat satu, kecuali setiap lajur mempunyai satu lagi elemen Reka letak dilaksanakan seperti berikut:

Sisi keenam kini kelihatan seperti ini:

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

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

Atas ialah kandungan terperinci Membawa anda langkah demi langkah untuk melaksanakan dadu 3D menggunakan CSS Flex dan susun atur Grid (dengan kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!