????? ????? CSS? ???? ???/?? ????? ???? ??? ?? ??? ?? ????. ?? ????? CSS? ???? 3D ???? ??? ??? ?????(Flex ? Grid ????? 3D ???? ???).

?? ???? ?? ? ????.

• ??? ???? 3D ?? ??
• 3D ???? ?? ?? ????? ??
• Flex ????? ???? ??? ???? ?? . [?? ??:
css ??? ????
• ]
1. Flex ????? ???? 6? ??

?? ??? 6?? HTML ??? ?????.

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

???? ? ?? ? ?? ?????. ?? ???:

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

HTML ??? ??? ????.

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

? ?? ?? ????? ?? ? ?? ??? ??? ???.

justify-content:center: ?? ??? ??(??)? ?????.

• align-items:center: ?? ???(??)? ??? ?????.
??? ??? ?? ?????.

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

? ?? ?? ?? ??? ????.

(2) ? ?

HTML ??? ??? ????.

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

??, ?? ??? ?????. ??? ????? ? ?? ??? ?? ??? ?????.

justify-content: space-between: ??? ????? ??? ? ??? ?? ??? ?????.

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

?? ??? ??? ??? ????.

?? ? ?? ???? ??? ??? ?? ??? ????. ??? ? ?? ?? ??? ??? ??? ???. ??? align-self ??? ???? ? ?? ?? ??? ??????? ??? ?????.

align-self: flex-end: ??? Flex ????? ?? ?????.

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

?? ? ?? ?? ??? ????.

(3) ? ?

HTML ??? ??? ????.

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

? ?? ?? ? ?? ?? ? ?? ???? ???? ?? ? ????.

align-self: flex-end: Flex ????? ?? ??? ?????.

• align-self: center: 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;
  }

?? ? ?? ?? ??? ????.

? ?? ?? ??? ? ???? ?? ? ?? ?? ?? ?? ???? ??? ??? ? align-self? ??? ? ????. flex-end? ? ?? ?? ???? ?? ? ?? ?? ???? ?? ? ?? ?? ??? ??? ??? ????? ?? ??? ????.

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

HTML ??? ??? ????:

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

4 ?? ?????? ? ??? ?? ? ??? ? ??? ? ?? ?? ?????. ? ?? flex-start? ?? ?? ?? flex-end? ????. ??? ???? ??? ???? ????? justify-content:space-between? ?????.

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

???? ?? ? ?? ??? ?????? ???.

?? flex ?????? ?????.

• ?? ?? ???? ????? flex-direction? ?? ?????.
• justify-content ?? ???? ???? ? ?? ?? ? ?? ?? ? ?? ?? ? ??? ?? ???.

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

?? ? ?? ?? ??? ????:

(5) Five points

HTML ??? ??? ????.

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

?? ?? ?? ? ?? ?? ???? ?? ??? ??? ????. ??? ?. ??? ? ?? ?? ???? ??? ?? ???? ???.

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

?? ?? ?? ?? ??? ????.

?? ??? ???? ???. justify-content? ??? ???? ???? ??? ???? ???:

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

?? ?? ?? ?? ??? ????:

(6) ?? ?

HTML ??? ??? ????:

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

?? ?? ?? ???? ??? ? ?? ??? ?? ??? ?????. ??? ? ??? ??? ??? ? ?? ????? ??? ?? ?????.

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

?? ?? ?? ??? ??? ????.

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)整行和列的大小，而只需使用名稱(chēng)來(lái)引用每個(gè)單元格。其語(yǔ)法本身提供了網(wǎng)格結(jié)構(gòu)的可視化，名稱(chēng)由網(wǎng)格項(xiàng)的網(wǎng)格區(qū)域?qū)傩远x。中間列中的點(diǎn)表示一個(gè)空單元格。

下面來(lái)使用grid-area屬性為網(wǎng)格項(xiàng)命名，然后，網(wǎng)格模板可以通過(guò)其名稱(chēng)引用該項(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;
}

最終的效果如下：

在線(xiàn)體驗(yàn)：

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

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

（學(xué)習(xí)視頻分享：css視頻教程、web前端）

? ??? CSS Flex ? ??? ????(?? ??)? ???? 3D ???? ???? ??? ???? ?????.? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!