今天利用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 }
原文地址：https://www.cnblogs.com/linqb/p/9515090.html
时间： 2024-10-24 10:03:56