詳解flex布局做骰子案例
上次案例用到了css3的3D特效，3D特效做正方體也是很常用的，所有我想到了利用css3做一個骰子，而骰子每一面的點數利用定位做起來很麻煩，利用css3的flex布局是很方便的，這次來看看如何利用flex彈性盒子的一些屬性完成骰子點數的布局~
首先，建立一個3D空間元素，做成正方體，是上一篇中詳細介紹過如何創建一個3D空間元素，這里就不細說了~實作一個正方體的原理是，在一個父元素中包含六個子元素，transform:rotate和translate來轉變好每一個的面，在撰寫程序中，以下是我覺得對視覺效果有很好體驗的一些細節：1、視距設定在body中，值給大一些，2、背景為黑色，骰子的每一面邊框帶一些圓角和內陰影，以下是我做出一個正方體的效果，
正方體創建好后，到了這次的重點–利用彈性盒子flex的一些屬性來布局每一面的點數，
首先在每一面中創建對應的div個數，并給每一面的div設定display:flex;和flex-wrap:wrap;（彈性盒子中元素在必要時換行）樣式
點數1
第一面只有一個子div，所以只需將其中心對齊就好了，設定justify-content: center;（元素在彈性盒子主軸中心開始排列）和 align-items: center;（元素在彈性盒子交叉軸中心開始排列），就可以實作水平垂直對稱了，部分代碼如下
.father1{
justify-content: center;
align-items: center;
}
點數2
第二面兩個元素首先設定主軸元素兩側的間距相等排列，再將第二個元素靠交叉軸終點排列，部分代碼如下
.father2{
justify-content: space-around;
}
.father2 .son:nth-child(2){
align-self:flex-end;
}
點數3
第三面三個元素首先設定主軸元素兩側的間距相等排列，再將第二個元素靠交叉軸中心排列，第三個元素靠交叉軸終點排列，部分代碼如下
.father3{
justify-content: space-around;
}
.father3 .son:nth-child(2){
align-self:center;
}
.father3 .son:nth-child(3){
align-self:flex-end;
}
點數4
第三面兩個元素一排并且都是靠垂直居中些排列，這里我設定主軸元素兩側的間距相等排列，由于元素在一列排不下會自動換行，所以增大每個元素外邊距就實作效果了，部分代碼如下
.father4{
justify-content:space-around;
}
.father4 .son{
margin: 25px;
}
點數5
第五面在子元素創建時分別創三個div里面分別放2、1、2div，設定主軸元素兩側的間距相等排列，設定盒子元素縱向排列，將面底下的三個div設為彈性盒子，第一、三個div設定主軸元素兩側的間距相等排列，第二個div設定主軸元素靠中心排列，部分代碼如下
.father5{
justify-content: space-around;
flex-direction: column;
}
.father5>div{
display: flex;
}
.five_1{
justify-content: space-around;
}
.five_2{
justify-content: center;
}
.five_3{
justify-content: space-around;
}
點數6
第五面在子元素創建時分別創三個div里面分別放2、1、2div，設定主軸元素兩側的間距相等排列，設定盒子元素縱向排列，將面底下的三個div設為彈性盒子設定主軸元素兩側的間距相等排列，和盒子元素橫向排列，部分代碼如下
.father6{
flex-direction:column;
justify-content: space-around;
}
.father6>div{
display: flex;
flex-direction:row;
justify-content:space-around;
}
再給骰子用animation屬性加一個自動旋轉的效果，就更加炫酷啦，示例圖和完整代碼如下，
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding:0px;
}
body{
perspective:8000px;
background-color: black;
}
.big{
position: relative;
top: 300px;
left: 400px;
width: 200px;
height: 200px;
/* border: 1px solid red; */
transform-style: preserve-3d;
transform:rotateX(180deg);
/* transform:rotatey(90deg); */
/* transition:all 10s linear; */
animation: run 10s linear 0s infinite;
}
/* .big:hover{
transform:rotateX(180deg) rotatey(180deg) rotatez(180deg);
} */
@keyframes run {
0%{
transform:rotateX(0deg) rotatey(0deg) rotatez(0deg);
}
100%{
transform:rotateX(180deg) rotatey(180deg) rotatez(180deg);
}
}
.father{
position: absolute;
width: 200px;
height: 200px;
display: flex;
flex-wrap:wrap;
border-radius: 30px;
box-shadow: 0px 0px 10px 10px #fff inset;
background-color: #EEE;
/* padding: 10px; */
}
.son{
width: 50px;
height: 50px;
border-radius: 25px;
background-color: black;
/* margin: 25px; */
}
/* 第一個面 */
.father1{
transform:rotateX(-90deg) translatez(-100px);
justify-content: center;
align-items: center;
}
.father1 .son{
background-color: brown;
}
/* 第六個面 */
.father6{
transform:rotateX(-90deg) translatez(100px);
flex-direction:column;
justify-content: space-around;
}
.father6>div{
display: flex;
flex-direction:row;
justify-content:space-around;
}
/* 第二個面 */
.father2{
transform:rotateY(-90deg) translatez(100px);
justify-content: space-around;
}
.father2 .son:nth-child(2){
/* background-color: brown; */
align-self:flex-end;
}
/* 第五個面 */
.father5{
transform:rotateY(-90deg) translatez(-100px);
justify-content: space-around;
flex-direction: column;
}
.father5>div{
display: flex;
}
.father5 .son{
margin: 0px;
}
.five_1{
justify-content: space-around;
}
.five_2{
justify-content: center;
}
.five_3{
justify-content: space-around;
}
/* 第三個面 */
.father3{
transform: translatez(100px);
justify-content: space-around;
/* align-content:space-between; */
}
.father3 .son{
margin: 0px;
}
.father3 .son:nth-child(2){
align-self:center;
}
.father3 .son:nth-child(3){
align-self:flex-end;
}
/* 第四個面 */
.father4{
transform: translatez(-100px);
justify-content:space-around;
/* align-content:space-around; */
}
.father4 .son{
margin: 25px;
}
</style>
</head>
<body>
<div class="big">
<div class="father father1">
<div class="son son1"></div>
</div>
<div class="father father2">
<div class="son"></div>
<div class="son"></div>
</div>
<div class="father father3">
<div class="son son1"></div>
<div class="son son1"></div>
<div class="son son1"></div>
</div>
<div class="father father4">
<div class="son son1"></div>
<div class="son son1"></div>
<div class="son son1"></div>
<div class="son son1"></div>
</div>
<div class="father father5">
<div class="five_1">
<div class="son"></div>
<div class="son"></div>
</div>
<div class="five_2">
<div class="son"></div>
</div>
<div class="five_3">
<div class="son"></div>
<div class="son"></div>
</div>
</div>
<div class="father father6">
<div class="six_1">
<div class="son"></div>
<div class="son"></div>
</div>
<div class="six_2">
<div class="son"></div>
<div class="son"></div>
</div>
<div class="six_3">
<div class="son"></div>
<div class="son"></div>
</div>
</div>
</div>
</body>
</html>
css3的flex布局做骰子效果就實作啦，對你有幫助的話點個贊支持下哦~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/241030.html
標籤：其他