立体骰子实现3D炫酷旋转效果（附完整源码）（附动画代码）

2024-06-03 08:59| 来源: 网络整理| 查看: 265

整体思路：首先搭建骰子整体的立方体

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; /*3d立体效果*/ 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); */ } /* @keyframes move { 20% { transform: rotateX(360deg); } 40% { transform: rotateY(360deg); } 60% { transform: rotateX(360deg); } 80% { transform: rotateY(360deg); } } */

【本文地址】

公司简介

联系我们