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

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

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);}} */

<div class="touzi"><!-- 正面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>

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

java 获取包下的所有类,附完整源码和测试代码
java 获取包下的所有类,完整Java代码如下: package com.example.demo.util;import java.io.File; import java.io.FileFilt ...
HTML5七夕情人节表白网页(抖音超火3D炫酷魔方) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音超火❤3D炫酷魔方❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这是程序 ...
粒子炫酷黑个人页源码
介绍: 粒子炫酷黑个人页源码网盘下载地址: http://kekewl.net/nWUoNVYdsyS 图片:
Python语言打造智能语音助手——附完整源码
Python语言打造智能语音助手--附完整源码随着智能家居.智能办公等领域的逐渐兴起,实现语音控制与交互已成为了一种趋势.而Python语言是一门极具魅力的编程语言,其强大的库.简洁的语法以及易于学 ...
JavaScript实现唯一路径问题的动态编程方法的算法（附完整源码）
JavaScript实现唯一路径问题的动态编程方法的算法(附完整源码) dpUniquePaths.js完整源代码 dpUniquePaths.test.js完整源代码 dpUniquePaths.j ...
JavaScript实现唯一路径问题的回溯方法的算法（附完整源码）
JavaScript实现唯一路径问题的回溯方法的算法(附完整源码) btUniquePaths.js完整源代码 btUniquePaths.test.js完整源代码 btUniquePaths.js完 ...
JavaScript实现squareMatrixRotation方阵旋转算法（附完整源码）
JavaScript实现squareMatrixRotation方阵旋转算法(附完整源码) squareMatrixRotation.js完整源代码 squareMatrixRotation.test ...
JavaScript实现递归楼梯问题（带记忆的递归解决方案）算法（附完整源码）
JavaScript实现递归楼梯问题(带记忆的递归解决方案)算法(附完整源码) recursiveStaircaseMEM.js完整源代码 recursiveStaircaseMEM.test.js完 ...
JavaScript实现递归楼梯问题（迭代解决方案）算法（附完整源码）
JavaScript实现递归楼梯问题(迭代解决方案)算法(附完整源码) recursiveStaircaseIT.js完整源代码 recursiveStaircaseIT.test.js完整源代码 r ...

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

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

最新文章

热门文章