今天利用CSS3来画一个自动滚动的骰子。
思路：骰子的六个面分别用六个ul标签，每个面的点数就是li标签，点数的排列采用伸缩布局，然后采用定位和transform属性将六个面翻转折叠成立方体。
1、HTML结构：用一个类名为box的大盒子将六个面（ul）包起来，方便给整个骰子定位和添加动画；每个ul里的li代表每个面的点数，其中第四、五、六面每一列的点数分别用一个div包起来
1 ?<div class="box"> 2 ????????<ul class="one"> 3 ????????????<li></li> 4 ????????</ul> 5 ????????<ul class="two"> 6 ????????????<li></li> 7 ????????????<li></li> 8 ????????</ul> 9 ????????<ul class="three">10 ????????????<li></li>11 ????????????<li></li>12 ????????????<li></li>13 ????????</ul>14 ????????<ul class="gtThree four">15 ????????????<div>16 ????????????????<li></li>17 ????????????????<li></li>18 ????????????</div>19 ????????????<div>20 ????????????????<li></li>21 ????????????????<li></li>22 ????????????</div>23 24 ????????</ul>25 ????????<ul class="gtThree five">26 ????????????<div>27 ????????????????<li></li>28 ????????????????<li></li>29 ????????????</div>30 ????????????<div>31 ????????????????<li></li>32 ????????????</div>33 ????????????<div>34 ????????????????<li></li>35 ????????????????<li></li>36 ????????????</div>37 ????????</ul>38 ????????<ul class="gtThree six">39 ????????????<div>40 ????????????????<li></li>41 ????????????????<li></li>42 ????????????????<li></li>43 ????????????</div>44 ????????????<div>45 ????????????????<li></li>46 ????????????????<li></li>47 ????????????????<li></li>48 ????????????</div>49 ????????</ul>50 ????</div>
2、利用伸缩（弹性）布局画出骰子六个面的点数
2.1给每个ul添加一个弹性布局，把每个li切成圆
1 ul { 2 ????width: 250px; 3 ????height: 250px; 4 ????background-color: white; 5 ????padding: 0; 6 ????list-style: none; 7 ????border-radius: 40px; 8 ????display: flex; 9 }10 11 li {12 ????width: 60px;13 ????height: 60px;14 ????border-radius: 50%;15 ????background-color: red;16 }2.2 第一面：主轴居中，副轴居中
1 .one {2 ?????justify-content: center;3 ?????align-items: center;4 }2.2第二面：将主轴改为垂直方向，两点均匀分开（space-around：两点之间的空白部分是两点前后各空白部分的两倍），副轴居中
1 .two {2 ????flex-direction: column;3 ????align-items: center;4 ????justify-content: space-around;5 }2.3第三面：将三点（水平）均匀分成三列，再分别给中间点设置副轴（垂直）居中，第三点设置位于副轴结尾
1 .three { 2 ????justify-content: space-around; 3 } 4 ?5 .three li:first-child { 6 ????margin-top: 10px; 7 } 8 ?9 .three li:nth-child(2) {10 ????align-self: center;11 }12 13 .three li:nth-child(3) {14 ????align-self: flex-end;15 ????margin-bottom: 10px;16 }2.4第四，五，六面：每一列均分（flex:1）排列，然后每一列再分别添加一个弹性布局，并将主轴改为垂直方向，其中的点数在主轴上均匀排列，副轴居中
1 .gtThree div {2 ????flex: 1;3 ????display: flex;4 ????flex-direction: column;5 ????justify-content: space-around;6 ????align-items: center;7 }3、利用定位和transform属性将每个面折叠成一个立方体：给每个ul设置一个绝对定位（定位父级是div.box），这样每个面都叠在一起，然后分别：
第一面（后面）：不动；
第二面（右侧面）：沿Y轴旋转90度，旋转轴是其右边框
第三面（左侧面）：沿Y轴旋转-90度，旋转轴是其左边框
第四面（底面）：沿X轴旋转-90度，旋转轴是其下边框
第五面（顶面）：沿X轴旋转90度，旋转轴是其上边框
第六面（前面）：沿Z轴平移250个像素
注：记得给body添加视距属性perspective（视距就是模拟一个镜头到元素的距离），否则看不出立体的效果
1 body { 2 ????perspective: 1800px; 3 ????background-color: black; 4 } 5 ul { 6 ????position: absolute; 7 ????left: 0; 8 ????top: 0; 9 }10 .one {11 ????transform: translateZ(0);12 }13 14 .two {15 ????transform: rotateY(90deg);16 ????transform-origin: right;17 ????18 }19 20 .three {21 ????transform: rotateY(-90deg);22 ????transform-origin: left;23 24 }25 26 .four{27 ????transform: rotateX(-90deg);28 ????transform-origin: bottom;29 }30 .five{31 ????transform: rotateX(90deg);32 ????transform-origin: top;33 }34 .six{35 ????transform: translateZ(250px);36 } 4、给骰子添加动画，让骰子动起来：定义一个change动画，让骰子自由旋转，角度可以自己慢慢调
注：transform-style: preserve-3d; 开启3D动画，必须写，否则没有3D动画效果
1 .box{ 2 ????transform-style: preserve-3d; ??3 ????animation: change 30s linear infinite; ??????????4 } 5 @keyframes change { 6 ????from{ 7 ????????transform: rotateY(360deg) rotateX(720deg) rotateZ(-720deg); 8 ????}to{ 9 ????????transform: ?rotateY(-360deg) rotateX(-720deg) rotateZ(720deg);10 ????????}11 }4.1鼠标移入事件：各个面分别展开
1 .box:hover .one{ 2 ????transform: translateZ(-50px); 3 } 4 .box:hover .two{ 5 ????left: 50px; 6 } 7 .box:hover .three{ 8 ????left: -50px; 9 }10 .box:hover .four{11 ????top: 50px;12 }13 .box:hover .five{14 ????top: -50px;15 }16 .box:hover .six{17 ????transform: translateZ(300px);18 }★★★附上完整CSS代码（HTML见上方）
?1 body { ?2 ????perspective: 1800px; ?3 ????background-color: black; ?4 } ?5 .box{ ?6 ????width: 250px; ?7 ????height: 250px; ?8 ????position: relative; ?9 ????margin: 150px auto; 10 ????transform-style: preserve-3d; ??11 ????animation: change 30s linear infinite; ??????12 ?????13 } 14 .box:hover .one{ 15 ????transform: translateZ(-50px); 16 } 17 .box:hover .two{ 18 ????left: 50px; 19 } 20 .box:hover .three{ 21 ????left: -50px; 22 } 23 .box:hover .four{ 24 ????top: 50px; 25 } 26 .box:hover .five{ 27 ????top: -50px; 28 } 29 .box:hover .six{ 30 ????transform: translateZ(300px); 31 } 32 ul { 33 ????width: 250px; 34 ????height: 250px; 35 ????background-color: white; 36 ????padding: 0; 37 ????list-style: none; 38 ????border-radius: 40px; 39 ????display: flex; 40 ????position: absolute; 41 ????/* opacity: .9; */ 42 ????transition: all 1s; 43 ????left: 0; 44 ????top: 0; 45 ????border: 1px solid black; ????46 } 47 ?48 li { 49 ????width: 60px; 50 ????height: 60px; 51 ????border-radius: 50%; 52 ????background-color: red; 53 } 54 ?55 .one { 56 ????justify-content: center; 57 ????align-items: center; 58 ????transform: translateZ(0); 59 } 60 ?61 .two { 62 ????flex-direction: column; 63 ????align-items: center; 64 ????justify-content: space-around; 65 ?????66 ????transform: rotateY(90deg); 67 ????transform-origin: right; 68 ?????69 } 70 ?71 .three { 72 ????justify-content: space-around; 73 ?74 ????transform: rotateY(-90deg); 75 ????transform-origin: left; 76 ?77 } 78 ?79 .three li:first-child { 80 ????margin-top: 10px; 81 } 82 ?83 .three li:nth-child(2) { 84 ????align-self: center; 85 } 86 ?87 .three li:nth-child(3) { 88 ????align-self: flex-end; 89 ????margin-bottom: 10px; 90 } 91 ?92 .four{ 93 ????transform: rotateX(-90deg); 94 ????transform-origin: bottom; 95 } 96 .five{ 97 ????transform: rotateX(90deg); 98 ????transform-origin: top; 99 }100 .six{101 ????transform: translateZ(250px);102 } 103 .gtThree div {104 ????flex: 1;105 ????display: flex;106 ????flex-direction: column;107 ????justify-content: space-around;108 ????align-items: center;109 }110 111 @keyframes change {112 ????from{113 ????????transform: rotateY(360deg) rotateX(720deg) rotateZ(-720deg);114 ????}to{115 ????????transform: ?rotateY(-360deg) rotateX(-720deg) rotateZ(720deg);116 ????????}117 }CSS3画一个滚动的骰子
原文地址：https://www.cnblogs.com/linqb/p/9515090.html