CSS 彈性布局色子的制作

效果截圖:CSS樣式及 html 代碼如下: CSS彈性布局 色子/*清除系統(tǒng)樣式及設置盒子模型*/*margin: 0;padding: 0;box-sizing: border-box;/*背景色*/html,bodybackground: black;/*清除列表樣式*/lilist-style: none;/*容器設置及動畫*/#wrapwidth: 100px;height: 100px;position: relative;margin: 150px auto;#cubewidth: 100px;height: 100px;background: rgb(221,221,221);transform-style: preserve-3d;transform: rotateX(30deg) rotateY(80deg);animation: dice 20s infinite;animation-timing-function: linear;-webkit-keyframes dicefromtransform: rotateX(0deg) rotateY(0deg);totransform: rotateX(360deg) rotateY(360deg);/*各個面的寬高及樣式*/#cube ul liposition: absolute;width: 100px;height: 100px;background: lightgray;border-radius: 10px;display: flex;/*點的大小及樣式*/spandisplay: block;width: 20px;height: 20px;background: black;border-radius: 10px;/*設置點數(shù)不同顏色*/#cube ul li:nth-child(1) span,#cube ul li:nth-child(2) span,#cube ul li:nth-child(3) spanbackground: red;#cube ul li:nth-child(4) span,#cube ul li:nth-child(5) span,#cube ul li:nth-child(6) spanbackground: blue;/*各面的位置設置*/#cube ul li:nth-child(1)transform: rotateY(0deg) translateZ(50px);align-items:center;justify-content:center;#cube ul li:nth-child(2)transform: translateZ(-50px) rotateY(180deg) ;flex-wrap:wrap;align-items:center;justify-content:space-around;#cube ul li:nth-child(3)transform: rotateY(90deg) translateZ(50px);align-items:center;justify-content:space-between;padding: 15px;#cube ul li:nth-child(4)transform: rotateY(-90deg) translateZ(50px);#cube ul li:nth-child(5)transform: rotateX(90deg) translateZ(50px);#cube ul li:nth-child(6)transform: rotateX(-90deg) translateZ(50px);/*色子點的位置調(diào)整*/*第三點面*/#cube ul li:nth-child(3) span:nth-child(1)align-self:flex-start;#cube ul li:nth-child(3) span:nth-child(3)align-self:flex-end;/*第四,第五,第六點面*/#four1,#four2,#five1,#five2,#five3,#six1,#six2flex