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

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

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

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

.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 次，來代替 1fr 1fr 1fr。還可以使用定義行/列的grid-template速記屬性將上述代碼進(jìn)行簡化：

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

所有的點將自動放置在每個單元格中，從左到右：

現(xiàn)在我們需要為每個骰子值定位點數(shù)。開始時我們提到，可以將每個面分成 3 x 3 的表格，但是這些表格并不是每一個都是我們需要的，分析骰子的六個面，可以發(fā)現(xià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)的單位來調(diào)整行和列的大小，而只需使用名稱來引用每個單元格。其語法本身提供了網(wǎng)格結(jié)構(gòu)的可視化，名稱由網(wǎng)格項的網(wǎng)格區(qū)域?qū)傩远x。中間列中的點表示一個空單元格。

下面來使用grid-area屬性為網(wǎng)格項命名，然后，網(wǎng)格模板可以通過其名稱引用該項目，以將其放置在網(wǎng)格中的特定區(qū)域中。: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;
}

現(xiàn)在六個面的樣式如下：

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

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

這時所有點的位置都正確了：

對于上面的 CSS，對應(yīng)的 HTML分別是父級為一個p標(biāo)簽，該面有幾個點，子級就有幾個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. 實現(xiàn) 3D 骰子

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

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

此時六個面的這樣的：

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

首先將第一個面在 Z 軸移動 100px：

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

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

因為每個面的寬高都是 200px，所以將第六面沿 Z 軸向下調(diào)整 100px：

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

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

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

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

此時六個面是這樣的：

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

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

此時六個面是這樣的：

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

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

此時六個面是這樣的：

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

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

此時六個面就組成了一個完整的正方體：

下面來為這個骰子設(shè)置一個動畫，讓它轉(zhuǎn)起來：

@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

（學(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!