本文已参与「新人创作礼」活动，一起开启掘金创作之路 整体思路：首先搭建骰子整体的立方体
1.先搭建前后两个面(front和back)，通过定位（子绝父相）将两个盒子定位在立方体正面，此时一面遮挡了另一面，在父盒子中添加transform-style: preserve-3d;达到3d立体效果，将前盒子沿z轴正方向移动高一半距离，后盒子沿z轴负方向移动高一半距离，前后盒子搭建完成，可搭配hover和过渡查看效果；
2.左右盒子与步骤1类似，不过左右盒子是需要进行左右移动高一半距离，且需要绕Z轴转动；
3.与左右盒子搭建类似，需要绕X轴转动，需要沿Y轴上下移动
4.在每个面添加骰子的点数，在front面，给front新加display: flex;（flex布局） justify-content: center;（主轴水平居中）align-items: center;（侧轴居中），子盒子为point，此时在front面正中间位置；
5.在back面，设置点数为2：给back添加flex布局，设置align-items: center;（侧轴居中），justify-content: space-evenly;（弹性容器、弹性盒子之间的间隙相等），在back中放置两个point盒子即可；
6.在left面设置3点：3个点可分为上中下三个盒子，给left添加flex布局，上面的盒子可以利用justify-content: flex-end;实现右上方对齐，中间盒子居中justify-content: center;align-items: center;，下面盒子justify-content: flex-start;左侧对齐，与盒子间距可通过给子盒子添加margin或给父盒子添加padding，其他的点也是类似步骤，完整代码如下： `* { margin: 0; padding: 0; box-sizing: border-box; }
/* 红点 */
.point {
width: 15px;
height: 15px;
background-color: red;
border-radius: 50%;
}
/* 骰子立方体样式 */
.touzi {
position: relative;
width: 100px;
height: 100px;
margin: 100px auto;
transform-style: preserve-3d;
/* hover的过渡 */
transition: all 3s;
/* 动画-转动骰子 */
/* animation: move 3s infinite; */
}
/* 立方体六个面 */
.front,
.back,
.left,
.right,
.under,
.above {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: rgba(0, 0, 0, .1);
border-radius: 10px;
}
/* 正面1点 */
.front {
display: flex;
justify-content: center;
align-items: center;
/* background-color: skyblue; */
transform: translateZ(50px);
}
/* 后面 2点*/
.back {
display: flex;
justify-content: space-evenly;
align-items: center;
/* background-color: rgb(10, 7, 14); */
transform: translateZ(-50px);
}
/* 左侧3点 */
.left {
display: flex;
justify-content: center;
align-items: center;
/* background-color: blue; */
padding: 10px 10px;
transform: translateX(-50px) rotateY(-90deg);
}
.left .box {
width: 100%;
}
.left .box .top {
display: flex;
justify-content: flex-end;
margin-bottom: 5px;
}
.left .box .content {
display: flex;
justify-content: center;
align-items: center;
}
.left .box .bottom {
display: flex;
justify-content: flex-start;
}
/* 右侧4点样式 */
.right {
display: flex;
justify-content: center;
align-items: center;
/* background-color: pink; */
transform: translateX(50px) rotateY(90deg);
}
.right .box {
width: 100%;
}
.right .box .top,
.right .box .bottom {
display: flex;
justify-content: space-evenly;
width: 100%;
}
.right .box .top {
margin-bottom: 15px;
}
/* 顶部6点 */
.above {
display: flex;
justify-content: space-evenly;
align-items: center;
/* background-color: green; */
transform: translateY(-50px) rotateX(90deg);
}
.above .box {
width: 100%;
}
.above .top,
.above .content,
.above .bottom {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.above .content {
margin: 10px 0;
}
/* 底面5点 */
.under {
display: flex;
justify-content: center;
align-items: center;
/* background-color: #d4f73a; */
transform: translateY(50px) rotateX(-90deg);
}
.under .box {
width: 100%;
}
.under .box .top,
.under .box .bottom {
display: flex;
justify-content: space-evenly;
width: 100%;
}
.under .box .content {
display: flex;
justify-content: center;
margin: 5px 0;
}
/* 当鼠标放到骰子上时，触发转动 */
.touzi:hover {
/* 绕Y轴旋转 */
/*transform: rotateY(360deg);*/
/* 绕X轴旋转 */
/* transform: rotateX(360deg); */
/* 3d旋转 */
transform: rotate3d(1, 1, 1, 360deg);
}
/* @keyframes move {
20% {
transform: rotateX(360deg);
}
40% {
transform: rotateY(360deg);
}
60% {
transform: rotateX(360deg);
}
80% {
transform: rotateY(360deg);
}
} */
<!-- 正面1点 -->
<div class="front">
<div class="point"></div>
</div>
<!-- 后面2点 -->
<div class="back">
<div class="point"></div>
<div class="point"></div>
</div>
<!-- 左侧3点 -->
<div class="left">
<div class="box">
<div class="top">
<div class="point"></div>
</div>
<div class="content">
<div class="point"></div>
</div>
<div class="bottom">
<div class="point"></div>
</div>
</div>
</div>
<!-- 右侧4点 -->
<div class="right">
<div class="box">
<div class="top">
<div class="point"></div>
<div class="point"></div>
</div>
<div class="bottom">
<div class="point"></div>
<div class="point"></div>
</div>
</div>
</div>
<!-- 底面5点 -->
<div class="under">
<div class="box">
<div class="top">
<div class="point"></div>
<div class="point"></div>
</div>
<div class="content">
<div class="point"></div>
</div>
<div class="bottom">
<div class="point"></div>
<div class="point"></div>
</div>
</div>
</div>
<!-- 顶部6点 -->
<div class="above">
<div class="box">
<div class="top">
<div class="point"></div>
<div class="point"></div>
</div>
<div class="content">
<div class="point"></div>
<div class="point"></div>
</div>
<div class="bottom">
<div class="point"></div>
<div class="point"></div>
</div>
</div>
</div>
</div>
