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

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

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

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

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

這里的 fr 單位允許將行或列的大小設(shè)置為網(wǎng)格容器可用空間的一部分，這上面的例子中，我們需要三分之一的可用空間，所以設(shè)置了 1fr 三次。

我們還可以使用 repeat(3, 1fr) 將 1fr 重復(fù) 3 次，來(lái)代替 1fr 1fr 1fr。還可以使用定義行/列的grid-template速記屬性將上述代碼進(jìn)行簡(jiǎn)化：

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

每個(gè)面所需要定義的 HTML 就像是這樣：

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

所有的點(diǎn)將自動(dòng)放置在每個(gè)單元格中，從左到右：

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

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

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

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

因此，我們可以不使用傳統(tǒng)的單位來(lái)調(diào)整行和列的大小，而只需使用名稱來(lái)引用每個(gè)單元格。其語(yǔ)法本身提供了網(wǎng)格結(jié)構(gòu)的可視化，名稱由網(wǎng)格項(xiàng)的網(wǎng)格區(qū)域?qū)傩远x。中間列中的點(diǎn)表示一個(gè)空單元格。

下面來(lái)使用grid-area屬性為網(wǎng)格項(xiàng)命名，然后，網(wǎng)格模板可以通過(guò)其名稱引用該項(xiàng)目，以將其放置在網(wǎng)格中的特定區(qū)域中。:nth-child()偽選擇器允許單獨(dú)定位每個(gè)點(diǎn)。

.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)在六個(gè)面的樣式如下：

可以看到，1、3、5的布局仍然是不正確的，只需要重新定位每個(gè)骰子的最后一個(gè)點(diǎn)即可：

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

這時(shí)所有點(diǎn)的位置都正確了：

對(duì)于上面的 CSS，對(duì)應(yīng)的 HTML分別是父級(jí)為一個(gè)p標(biāo)簽，該面有幾個(gè)點(diǎn)，子級(jí)就有幾個(gè)span標(biāo)簽。代碼如下：

<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. 實(shí)現(xiàn) 3D 骰子

上面我們分別使用 Flex 和 Grid 布局實(shí)現(xiàn)了骰子的六個(gè)面，下面來(lái)這將六個(gè)面組合成一個(gè)正方體。

首先對(duì)六個(gè)面進(jì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 的角度不重要，主要是便于后面查看。

此時(shí)六個(gè)面的這樣的：

看起來(lái)有點(diǎn)奇怪，所有面都疊加在一起。不要急，我們來(lái)一個(gè)個(gè)調(diào)整位置。

首先將第一個(gè)面在 Z 軸移動(dòng) 100px：

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

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

因?yàn)槊總€(gè)面的寬高都是 200px，所以將第六面沿 Z 軸向下調(diào)整 100px：

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

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

下面來(lái)調(diào)整第二面，將其在X軸向后移動(dòng) 100px，并沿著 Y 軸旋轉(zhuǎn) -90 度：

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

此時(shí)六個(gè)面是這樣的：

下面來(lái)調(diào)整第二面的對(duì)面：第五面，將其沿 X 軸的正方向移動(dòng) 100px，并沿著 Y 軸方向選擇 90 度：

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

此時(shí)六個(gè)面是這樣的：

下面來(lái)調(diào)整第三面，道理同上：

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

此時(shí)六個(gè)面是這樣的：

最后來(lái)調(diào)整第五面：

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

此時(shí)六個(gè)面就組成了一個(gè)完整的正方體：

下面來(lái)為這個(gè)骰子設(shè)置一個(gè)動(dòng)畫(huà)，讓它轉(zhuǎn)起來(lái)：

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

最終的效果如下：

在線體驗(yàn)：

3D 骰子-Flex：https://codepen.io/cugergz/pen/jOzYGyV

3D 骰子-Grid：https://codepen.io/cugergz/pen/GROMgEe

（學(xué)習(xí)視頻分享：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!