在前端面試中，經(jīng)常會(huì)問(wèn)到如何使用 CSS 實(shí)現(xiàn)骰子/麻將布局。下面本篇文章給大家介紹一下用CSS 創(chuàng)建一個(gè) 3D 骰子（Flex和Grid布局實(shí)現(xiàn)3D骰子）的方法，希望對(duì)大家有所幫助！
通過(guò)本文可以學(xué)到：
- 使用transform來(lái)實(shí)現(xiàn)3D形狀；
- 給 3D 骰子實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫(huà)；
- 使用 Flex 布局來(lái)實(shí)現(xiàn)骰子布局；
- 使用 Grid 布局來(lái)實(shí)現(xiàn)骰子布局?！就扑]學(xué)習(xí)：css視頻教程】
1. 使用 Flex 布局實(shí)現(xiàn)六個(gè)面
首先，來(lái)定義骰子六個(gè)面的 HTML 結(jié)構(gòu)：
<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>下面來(lái)實(shí)現(xiàn)每個(gè)面和每個(gè)點(diǎn)的的基本樣式：
.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;
}實(shí)現(xiàn)效果如下：
（1）一個(gè)點(diǎn)
HTML 結(jié)構(gòu)如下：
<div class="dice first-face"> <span class="dot"></span> </div>
實(shí)現(xiàn)第一個(gè)面，只需要讓它水平和垂直方向都居中即可：
- justify-content:center：使點(diǎn)與主軸（水平）的中心對(duì)齊。
- align-items:center：使點(diǎn)與交叉軸（垂直）的中心對(duì)齊。
代碼實(shí)現(xiàn)如下：
.first-face {
display: flex;
justify-content: center;
align-items: center;
}現(xiàn)在第一面是這樣的：
（2）兩個(gè)點(diǎn)
HTML 結(jié)構(gòu)如下：
<div class="dice second-face"> <span class="dot"></span> <span class="dot"></span> </div>
首先來(lái)將第二個(gè)面的父元素設(shè)置為flex布局，并添加以下屬性：
justify-content: space-between：將子元素放置在 flex 容器的開(kāi)頭和結(jié)尾。
.second-face {
display: flex;
justify-content : space-between;
}現(xiàn)在點(diǎn)的位置如下：
這時(shí)，第一個(gè)點(diǎn)在正確的位置：左上角。而第二個(gè)點(diǎn)需要在右下角。因此，下面來(lái)使用 align-self 屬性單獨(dú)調(diào)整第二個(gè)點(diǎn)的位置：
align-self: flex-end：將項(xiàng)目對(duì)齊到 Flex 容器的末尾。
.second-face .dot:nth-of-type(2) {
align-self: flex-end;
}現(xiàn)在第二面是這樣的：
（3）三個(gè)點(diǎn)
HTML 結(jié)構(gòu)如下：
<div class="dice third-face"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div>
可以通過(guò)在第二面放置另一個(gè)中心點(diǎn)來(lái)實(shí)現(xiàn)第三面。
- align-self: flex-end：將項(xiàng)目對(duì)齊到 Flex 容器的末尾。
- align-self: center：將項(xiàng)目對(duì)齊到 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;
}現(xiàn)在第三面是這樣的：
如果想要第一個(gè)點(diǎn)在右上角，第三個(gè)點(diǎn)在左下角，可以將第一個(gè)點(diǎn)的 align-self 更改為 flex-end，第二個(gè)點(diǎn)不變，第三個(gè)點(diǎn)無(wú)需設(shè)置，默認(rèn)在最左側(cè)：
.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;
}現(xiàn)在第三面是這樣的：
（4）四個(gè)點(diǎn)
HTML 結(jié)構(gòu)如下：
<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>在四個(gè)點(diǎn)的面中，可以將其分為兩行，每行包含兩列。一行將在 flex-start ，另一行將在 flex-end 。并添加 justify-content: space-between 以便將其放置在骰子的左側(cè)和右側(cè)。
.fourth-face {
display: flex;
justify-content: space-between
}接下來(lái)需要對(duì)兩列點(diǎn)分別進(jìn)行布局：
- 將列設(shè)置為flex布局；
- 將flex-direction設(shè)置為column，以便將點(diǎn)放置在垂直方向上
- 將justify-content設(shè)置為space-between，它將使第一個(gè)點(diǎn)在頂部，第二個(gè)點(diǎn)在底部。
.fourth-face .column {
display: flex;
flex-direction: column;
justify-content: space-between;
}現(xiàn)在第四面是這樣的：
（5）五個(gè)點(diǎn)
HTML 結(jié)構(gòu)如下：
<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>第五面和第四面的差異在于多了中間的那個(gè)點(diǎn)。所以，可以基于第四面，來(lái)在中間增加一列，樣式如下：
.fifth-face {
display: flex;
justify-content: space-between
}
.fifth-face .column {
display: flex;
flex-direction: column;
justify-content: space-between;
}現(xiàn)在第五面是這樣的：
還需要對(duì)中間的點(diǎn)進(jìn)行調(diào)整，可以設(shè)置 justify-content 為 center 讓它垂直居中：
.fifth-face .column:nth-of-type(2) {
justify-content: center;
}現(xiàn)在第五面是這樣的：
（6）六個(gè)點(diǎn)
HTML 結(jié)構(gòu)如下：
<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>第六個(gè)面的布局和第四個(gè)幾乎完全一樣，只不過(guò)每一列多了一個(gè)元素，布局實(shí)現(xiàn)如下：
.sixth-face {
display: flex;
justify-content: space-between
}
.sixth-face .column {
display: flex;
flex-direction: column;
justify-content: space-between;
}現(xiàn)在第六面是這樣的：
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前端）
以上是手把手帶你使用CSS Flex和Grid布局實(shí)現(xiàn)3D骰子（附代碼）的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門(mén)文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
熱門(mén)話題
什么是'渲染障礙CSS”？
Jun 24, 2025 am 12:42 AM
CSS會(huì)阻塞頁(yè)面渲染是因?yàn)闉g覽器默認(rèn)將內(nèi)聯(lián)和外部CSS視為關(guān)鍵資源，尤其是使用引入的樣式表、頭部大量?jī)?nèi)聯(lián)CSS以及未優(yōu)化的媒體查詢樣式。1.提取關(guān)鍵CSS并內(nèi)嵌至HTML；2.延遲加載非關(guān)鍵CSS通過(guò)JavaScript；3.使用media屬性優(yōu)化加載如打印樣式；4.壓縮合并CSS減少請(qǐng)求。建議使用工具提取關(guān)鍵CSS，結(jié)合rel="preload"異步加載，合理使用media延遲加載，避免過(guò)度拆分與復(fù)雜腳本控制。
如何使用CSS在網(wǎng)站上實(shí)現(xiàn)黑模式主題？
Jun 19, 2025 am 12:51 AM
ToimplementdarkmodeinCSSeffectively,useCSSvariablesforthemecolors,detectsystempreferenceswithprefers-color-scheme,addamanualtogglebutton,andhandleimagesandbackgroundsthoughtfully.1.DefineCSSvariablesforlightanddarkthemestomanagecolorsefficiently.2.Us
您能解釋EM，REM，PX和視口單元（VH，VW）之間的區(qū)別嗎？
Jun 19, 2025 am 12:51 AM
The topic differencebetweenem, Rem, PX, andViewportunits (VH, VW) LiesintheirreFerencepoint: PXISFixedandbasedonpixelvalues, emissrelative EtothefontsizeFheelementoritsparent, Remisrelelatotherootfontsize, AndVH/VwarebaseDontheviewporttimensions.1.PXoffersprecis
外部與內(nèi)部CSS：最好的方法是什么？
Jun 20, 2025 am 12:45 AM
thebestapphachforcssdepprodsontheproject'sspefificneeds.forlargerprojects，externalcsSissBetterDuoSmaintoMaintainability andReusability; forsMallerProjectsorsingle-pageApplications，InternaltCsmightBemoresobleable.InternalCsmightBemorese.it.it'sclucialtobalancepopryseceneceenceprodrenceprodrenceNeed
我的CSS必須在較低的情況下嗎？
Jun 19, 2025 am 12:29 AM
否，CSSDOESNOTHAVETOBEINLOWERCASE.CHOMENDENS，使用flowercaseisrecommondendendending：1）一致性和可讀性，2）避免使用促進(jìn)性技術(shù)，3）潛在的Performent FormanceBenefits，以及4）RightCollaboraboraboraboraboraboraboraboraboraboraboraboraboraboraboraboraborationWithInteams。
內(nèi)聯(lián)，塊，內(nèi)聯(lián)塊和Flex顯示值之間的關(guān)鍵區(qū)別是什么？
Jun 20, 2025 am 01:01 AM
在CSS中選擇正確的display值至關(guān)重要，因?yàn)樗刂圃卦诓季种械男袨椤?.inline：使元素像文本一樣流動(dòng)，不獨(dú)占一行，無(wú)法直接設(shè)置寬高，適用于文本內(nèi)元素如；2.block：使元素獨(dú)占一行并占據(jù)全部寬度，可設(shè)置寬高和內(nèi)外邊距，適用于結(jié)構(gòu)化元素如；3.inline-block：兼具block特性和inline布局，可設(shè)置尺寸但仍同行顯示，適合需要一致間距的水平布局；4.flex：現(xiàn)代布局模式，適用于容器，通過(guò)justify-content、align-items等屬性輕松實(shí)現(xiàn)對(duì)齊與分布，是
您如何使用CSS對(duì)SVG進(jìn)行動(dòng)畫(huà)動(dòng)畫(huà)？
Jun 30, 2025 am 02:06 AM
AnimatingSVGwithCSSispossibleusingkeyframesforbasicanimationsandtransitionsforinteractiveeffects.1.Use@keyframestodefineanimationstagesforpropertieslikescale,opacity,andcolor.2.ApplytheanimationtoSVGelementssuchas,,orviaCSSclasses.3.Forhoverorstate-b
什么是AutoPrefixer，它如何工作？
Jul 02, 2025 am 01:15 AM
Autoprefixer是一個(gè)根據(jù)目標(biāo)瀏覽器范圍自動(dòng)為CSS屬性添加廠商前綴的工具。1.它解決了手動(dòng)維護(hù)前綴易出錯(cuò)的問(wèn)題；2.通過(guò)PostCSS插件形式工作，解析CSS、分析需加前綴的屬性、依配置生成代碼；3.使用步驟包括安裝插件、設(shè)置browserslist、在構(gòu)建流程中啟用；4.注意事項(xiàng)有不手動(dòng)加前綴、保持配置更新、非所有屬性都加前綴、建議配合預(yù)處理器使用。
