CSS 弹性布局色子的制作

效果截图 CSS 样式及 html 代码如下 CSS 弹性布局 色子 清除系统样式及设置盒子模型 margin 0 padding 0 box sizing border box 背景色 html body background black 清除列表样式 li list style none 容器设置及动画 wrap width 100px height 100px position relative margin 150px auto cube width 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 dice from transform rotateX 0deg rotateY 0deg to transform rotateX 360deg rotateY 360deg 各个面的宽高及样式 cube ul li position absolute width 100px height 100px background lightgray border radius 10px display flex 点的大小及样式 span display block width 20px height 20px background black border radius 10px 设置点数不同颜色 cube ul li nth child 1 span cube ul li nth child 2 span cube ul li nth child 3 span background red cube ul li nth child 4 span cube ul li nth child 5 span cube ul li nth child 6 span background 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 色子点的位置调整 第三点面 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 six2 flex gr