首頁 > web前端 > css教學 > 手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼)

手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼)

青灯夜游
發布: 2022-09-23 09:58:10
轉載
2253 人瀏覽過

在前端面試中,常常會問到如何使用 CSS 實作骰子/麻將佈局。以下這篇文章為大家介紹一下用CSS 創建一個 3D 骰子(Flex和Grid佈局實現3D骰子)的方法,希望對大家有幫助!

手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼)

透過本文可以學到:

  • 使用transform來實現3D形狀;
  • 給3D 骰子實現旋轉動畫;
  • 使用Flex 佈局來實作骰子佈局;
  • 使用Grid 佈局來實作骰子佈局。 【推薦學習:css影片教學

1. 使用Flex 佈局實作六個面

#首先,來定義骰子六個面的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;
}
登入後複製

實作效果如下:

手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼)

(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;
}
登入後複製

現在第一面是這樣的:

手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼)

(2)兩個點

HTML 結構如下:

<div class="dice second-face">
  <span class="dot"></span>
  <span class="dot"></span>
</div>
登入後複製

首先來將第二個面的父元素設定為flex佈局,並加入以下屬性:

justify-content: space-between:將子元素放置在flex 容器的開頭和結尾。

.second-face {
   display: flex;
   justify-content : space-between;
}
登入後複製

現在點的位置如下:

手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼)

這時,第一個點在正確的位置:左上角。而第二個點需要在右下角。因此,以下來使用 align-self 屬性單獨調整第二個點的位置:

align-self: flex-end:將項目對齊到 Flex 容器的末端。

.second-face .dot:nth-of-type(2) {
 align-self: flex-end;
}
登入後複製

現在第二面是這樣的:

手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼)

(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;
}
登入後複製

現在第三面是這樣的:

手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼)

如果想要第一個點在右上角,第三個點在左下角,可以將第一個點的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;
}
登入後複製

現在第三面是這樣的:

手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼)

(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>
登入後複製

在四個點的面中,可以將其分為兩行,每行包含兩列。一行將在 flex-start ,另一行將在 flex-end 。並添加 justify-content: space-between 以便將其放置在骰子的左側和右側。

.fourth-face {
 display: flex;
 justify-content: space-between
}
登入後複製

接下來需要將兩個列點分別進行佈局:

  • 將列設定為flex佈局;
  • 將flex-direction設定為column,以便將點放置在垂直方向上
  • 將justify-content設定為space-between,它將使第一個點在頂部,第二個點在底部。
.fourth-face .column {
 display: flex;
  flex-direction: column;
  justify-content: space-between;
}
登入後複製

現在第四面是這樣的:

手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼)

#(5)五個點

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;
}
登入後複製

現在第五面是這樣的:

手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼)

還需要對中間的點進行調整,可以設定justify-content 為center 讓它垂直居中:

.fifth-face .column:nth-of-type(2) {
 justify-content: center;
}
登入後複製

現在第五面是這樣的:

手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼)

(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;
}
登入後複製

現在第六面是這樣的:

手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼)

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>
登入後複製

所有的点将自动放置在每个单元格中,从左到右:

1手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼)

现在我们需要为每个骰子值定位点数。开始时我们提到,可以将每个面分成 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前端

以上是手把手帶你使用CSS Flex和Grid佈局實現3D骰子(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:jb51.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板