《CSS 弹性布局色子的制作》由会员分享，可在线阅读，更多相关《CSS 弹性布局色子的制作（6页珍藏版）》请在装配图网上搜索。
1、效果截图:CSS样式及 html 代码如下: CSS弹性布局 色子/*清除系统样式及设置盒子模型*/*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);
2、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;h
3、eight: 100px;background: lightgray;border-radius: 10px;display: flex;/*点的大小及样式*/spandisplay: 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) spanbackground: red;#cube ul li:nth-child
4、(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
5、: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
6、);#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,#six2flex-grow:1;display: flex;flex-direction:column;justify-content:space-around;align-items:center;
CSS 弹性布局色子的制作
