JS实现骰子3D旋转效果-创新互联

本文实例为大家分享了JS实现骰子3D旋转效果展示的具体代码，供大家参考，具体内容如下

css部分代码：

 .dice_box {
 width: 400px;
 height: 400px;
 position:relative;
 margin:0 auto;
 perspective: 900px;
 -moz-perspective: 900px;
 -webkit-perspective: 900px;
 perspective-origin: 50%, 50%;
 -moz-perspective-origin: 50%, 50%;
 -webkit-perspective-origin: 50%, 50%;
}
 
#dice1 {
 position: relative;
 -moz-transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
 top:-90px;
 left:100px;
 width: 150px;
 height: 150px;
}
 
#dice2 {
 position: relative;
 -moz-transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
 width: 150px;
 left: 120px;
 top: -150px; 
 height: 150px;
}
 
#dice3 {
 position: relative;
 top: -320px;
 left: 20px; 
 -moz-transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
 width: 150px;
 height: 150px;
}
 
#dice3 ul li,#dice1 ul li,#dice2 ul li {
 position: absolute;
 list-style: none;
 width: 50px;
 height: 50px;
 line-height: 50px;
 text-align: center;
 font-size: 50px;
}
 
#dice1 ul li:nth-of-type(1),#dice2 ul li:nth-of-type(1),#dice3 ul li:nth-of-type(1) {
 top: 0px;
 left: 50px;
 -moz-transform-origin: bottom;
 -moz-transform: rotateX(-90deg);
 -webkit-transform-origin: bottom;
 -webkit-transform: rotateX(-90deg);
}
#dice1 ul li:nth-of-type(2),#dice2 ul li:nth-of-type(2),#dice3 ul li:nth-of-type(2) {
 top: 50px;
 left: 50px;
}
 
#dice1 ul li:nth-of-type(3),#dice2 ul li:nth-of-type(3),#dice3 ul li:nth-of-type(3) {
 top: 50px;
 left: 100px;
 -moz-transform-origin: left;
 -moz-transform: rotateY(-90deg);
 -webkit-transform-origin: left;
 -webkit-transform: rotateY(-90deg);
}
 
#dice1 ul li:nth-of-type(4),#dice2 ul li:nth-of-type(4),#dice3 ul li:nth-of-type(4) {
 top: 50px;
 left: 0px;
 -moz-transform-origin: right;
 -moz-transform: rotateY(90deg);
 -webkit-transform-origin: right;
 -webkit-transform: rotateY(90deg);
}
 
#dice1 ul li:nth-of-type(5),#dice2 ul li:nth-of-type(5),#dice3 ul li:nth-of-type(5) {
 top: 100px;
 left: 50px;
 -moz-transform-origin: top;
 -moz-transform: rotateX(90deg); 
 -webkit-transform-origin: top;
 -webkit-transform: rotateX(90deg);
}
 
#dice1 ul li:nth-of-type(6),#dice2 ul li:nth-of-type(6),#dice3 ul li:nth-of-type(6) {
 top: 50px;
 left: 50px;
 -moz-transform: translateZ(50px);
 -webkit-transform: translateZ(50px);
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。