当前位置：个人在线分享 > Web前端项目-交互式3D魔方【附源码】

Web前端项目-交互式3D魔方【附源码】

作者 : admin 本文共11371个字，预计阅读时间需要29分钟发布时间： 2024-06-17 共1人阅读

交互式`3D`魔方

3D魔方游戏是一款基于网页技术的三维魔方游戏。它利用HTML、CSS和JavaScript前端技术来实现3D效果，并在网页上呈现出逼真的魔方操作体验。

运行效果：

一：`index.html`

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles/cube.css">
<link rel="stylesheet" type="text/css" href="styles/doodle2.css">
<link rel="stylesheet" type="text/css" href="styles/certificate2.css">
<script charset="utf-8" src="scripts/tween.r12.js"></script>
<script charset="utf-8" src="scripts/three.js"></script>
<script charset="utf-8" src="scripts/cuber.min.js"></script>
</head>
<body>
<div id="bg"></div>
<div id="container"></div>
<div id="fail">
<img src="media/static-cube.png"/>
<div id="upgradeText" class="bubble fadeTransition">
<div class="upgradetext">To play, please use a supported hardware configuration and the latest version of one of these browsers:</div>
<br>
<a class="upgradetext" href="https://www.google.com/chrome/browser/" target="_blank">Chrome</a><br>
<a class="upgradetext" href="https://www.mozilla.org/firefox" target="_blank">Firefox</a><br>
<a class="upgradetext" href="https://www.apple.com/safari" target="_blank">Safari</a><br>
<span class="pointerleft SPRITE_carrot_down_2x"></span>
</div>
</div>
<div id="uipanel" class="fadeTransition" style="display:none">
<div id="movecounter">0</div>
<div id="buttonpanel">
<div id="sharebubble" class="fadeTransition" style="opacity:0">
<input id="shareshortlink" type="text" value="google.com/doodles" readonly/>
<div id="sharegplus" class="bubbleicon SPRITE_google_plus_64_2x"></div>
<div id="sharefacebook" class="bubbleicon SPRITE_facebook_64_2x"></div>
<div id="sharetwitter" class="bubbleicon SPRITE_twitter_64_2x"></div>
<div id="shareemail" class="bubbleicon SPRITE_email_64_2x"></div>
</div>
<div id="uibuttons">
<div id="sharebutton" class="bubbleicon SPRITE_share_64_2x"></div>
<div id="helpbutton" class="bubbleicon SPRITE_help_64_2x"></div>
<div id="searchbutton" class="bubbleicon SPRITE_search_64_2x"></div>
</div>
</div>
<div id="helpbubble" class="bubble" style="display:none">
<span class="pointerup SPRITE_carrot_grey_up_2x"></span>
<div id="helpimage" class="one"></div>
<div id="helptext" class="helptext"></div>
<div id="helpnext" class="helptext"></div>
<span class="pointerdown SPRITE_carrot_down_2x"></span><br>
</div>
</div>
<script charset="utf-8" src="scripts/iecss3d.js"></script>
<script charset="utf-8" src="scripts/ierenderer.js"></script>
<script charset="utf-8" src="scripts/deviceMotion.js"></script>
<script charset="utf-8" src="scripts/locked.js"></script>
<script charset="utf-8" src="scripts/textBox.js"></script>
<script charset="utf-8" src="scripts/ResizeableTextBox.3.js"></script>
<script charset="utf-8" src="scripts/divBox.js"></script>
<script charset="utf-8" src="scripts/frames.js"></script>
<script charset="utf-8" src="scripts/certificate.js"></script>
<script charset="utf-8" src="scripts/main3.js"></script>
</body>
</html>

二：`styles`包

（1）`cube.css`

.cube {
width:  100%;
height: 100%;
}
.faceLabel {
display: none;
position: absolute;
font-size: 60px;
text-align: center;
text-shadow: 0 0 24px rgba( 0, 0, 0, 0.3 );
color: #FFF;
}
.cube .cubelet {
width:  1em;
height: 1em;
position: absolute;
box-sizing: border-box;
}
.cube .face {
position: absolute;
width:  1em;
height: 1em;
background-color: #000;
text-align: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
padding: 0.05em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.cube .face.faceIntroverted { background-color: #000; }
.cube .face.faceTransparent { background-color: transparent; }
.purty .face { opacity: 0.5; }
.purty .face.faceFront { background-color: #FFF; }
.purty .face.faceUp    { background-color: #E87000; }
.purty .face.faceRight { background-color: #3D81F6; }
.purty .face.faceDown  { background-color: #DC422F; }
.purty .face.faceLeft  { background-color: #009D54; }
.purty .face.faceBack  { background-color: #F5B400; }
.cube .face > .wireframe {
display: none;
position: absolute;
width:  140px;
height: 140px;
background-color: rgba( 255, 255, 255, 0.05 );
}
.cube .sticker {
width:  100%;
height: 100%;
background-color: #F0F;
border-radius: 0.1em;
text-align: center;
}
.cube .sticker.red   { background: #DC422F; }
.cube .sticker.white  { background: #F3F3F3; }
.cube .sticker.blue  { background: #3D81F6;  }
.cube .sticker.green  { background: #009D54; }
.cube .sticker.orange  { background: #E87000;  }
.cube .sticker.yellow  { background: #F5B400;  }
.cube .sticker.stickerLogo {
background-size: 100% 100%;
background-repeat: none;
}
.cube .face > .id {
display: none;
position: absolute;
z-index: 1000;
width:  90%;
height: 90%;
font-size:   1em;
line-height: 0.9em;
text-align: center;
color: #000;
}
.cube .face > .id > .underline {
border-bottom: 1px solid #000;
}
.cube .face.faceIntroverted > .id {
color: #FEFEFE;
}
.cube .face.faceIntroverted > .id > .underline {
border-bottom: 1px solid #FEFEFE;
}
.cube .face > .text {
display: none;
position: absolute;
z-index: 2000;
width:  100%;
height: 100%;
text-align: center;
color: #FFF;
font-size:   1em;
line-height: 1em;
}

（2）`certificate2.css`

#certName, #certSolved{
width: 1100px;
color: #DC422F;
padding: 20px;
font-family: "Rubik One", Arial, sans-serif;
font-size: 180px;
text-align: center;
line-height: .97em;
text-transform: uppercase;
}
#certDate, #certMovesHeader, #certTimeHeader, #certName, #certSolved, #certTimeNumber, #certMovesNumber{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
#certDate{
width: 1000px;
color: #000;
padding: 20px;
font-family: "Rubik One", Arial, sans-serif;
text-transform: uppercase;
font-size: 110px;
text-align:center;
line-height: .8em;
}
#certMovesHeader, #certTimeHeader {
width: 1000px;
color: #000;
padding: 20px;
font-family: "Rubik One", Arial, sans-serif;
text-transform: uppercase;
font-size: 90px;
text-align: center;
line-height: .8em;
}
#certTimeNumber, #certMovesNumber{
width: 1000px;
color: #3D81F6;
padding: 20px;
font-family: "Rubik One", Arial, sans-serif;
font-size: 180px;
text-align: center;
line-height: 1.0em;
text-transform: uppercase;
}
#certLarryName, #certErnoName{
width: 1000px;
color: #FF6C00;
padding: 20px;
font-family: "Rubik One", Arial, sans-serif;
font-size: 80px;
text-align: center;
line-height: 1.0em;
}
#larrySignature{
width: 1000px;
height: 300px;
background-size: 700px 210px;
background-repeat:no-repeat;
background-position:center;
}
#ernoSignature{
width: 1000px;
height: 300px;
background-size: 700px 210px;
background-repeat:no-repeat;
background-position:center;
}
#lineLeft, #lineRight{
width: 1000px;
height: 10px;
background-color: #000;
display: inline-block;
background-repeat: no-repeat;
background-position: 100px 100px;
}
.logoFace {
width: 100%;
height: 100%;
display: block;
z-index: 1000;
background-size: 100% 100%;
background-repeat: none;
top: 0px;
right: 1px;
position: absolute;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.faceDown .logoFace.ie{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.cube .sticker.red { background: #DC422F; }
.cube .sticker.white { background: #FFFFFF; }
.cube .sticker.blue { background: #3D81F6; }
.cube .sticker.green { background: #009D54; }
.cube .sticker.orange { background: #FF6C00; }
.cube .sticker.yellow { background: #FDCC09; }
.textBox_IE{
z-index: 10;
top:0;
}

（3）`doodle2.css`

html {
height: 100%;
}
body {
background-color: #fff;
display: inline;
font-family: arial, sans-serif;
font-size: 13px;
height: 100%;
line-height: 40px;
margin: 0;
vertical-align: baseline;
-moz-user-select:-moz-none;
-ms-user-select:none;
-webkit-tap-highlight-color:transparent;
-webkit-user-select:none;
}
#fail {
position: absolute;
display: none;
top: 50%;
left: 50%;
margin-left: -288px;
margin-top: -117px;
}
@media not screen and (-webkit-transform-3d){
#container {
visibility: hidden;
}
#fail {
display: block;
}
}
#bg {
background-color: #fff;
font-family: arial, sans-serif;
font-size: 13px;
height: 100%;
line-height: 40px;
margin: 0;
position: absolute;
width: 100%;
}
.graydient {
background: #000;
background: -moz-radial-gradient(center,ellipse cover,#444 0%,#000000 90%);
background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,#444),color-stop(90%,#000000));
background: -webkit-radial-gradient(center,ellipse cover,#444 0%,#000000 90%);
background: -o-radial-gradient(center,ellipse cover,#444 0%,#000000 90%);
background: -ms-radial-gradient(center,ellipse cover,#444 0%,#000000 90%);
background: radial-gradient(ellipse at center,#444 0%,#000000 90%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444',endColorstr='#000000',GradientType=1 );
}
.grey {
background: #555;
}
.white {
background: #FFF;
}
#container {
cursor: pointer;
height: 100%;
overflow: hidden;
width: 100%;
position:relative;
}
.text {
font-size: 200;
}
.text.textDown  { color: #DC422F; }
.text.textBack  { color: #F5B400; }
.text.textRight { color: #3D81F6; }
.shadow {
pointer-events: none;
position: absolute;
width: 120px;
height: 120px;
background: black;
box-shadow: 0 0 100px 80px black;
opacity: 0.06;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.bubble {
background: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 3px solid black;
bottom: 4px;
line-height: normal;
padding: 16px;
position: absolute;
right: 0;
}
.mobile .bubble {
background: #000;
border: 2px solid #555;
bottom: auto;
position: absolute;
right: 0;
top: 44px;
}
.pointerdown {
bottom: -15px;
display: block;
height: 15px;
margin: 0 0 0 -5px;
outline: none;
position: absolute;
right: 42px;
}
.mobile .pointerdown {
display: none;
}
.pointerup {
display: none;
}
.mobile .pointerup {
top: -15px;
display: block;
outline: none;
position: absolute;
right: 68px;
}
.bubbleicon {
cursor: pointer;
display: inline-block;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.fadeTransition {
-webkit-transition: opacity 250ms;
-moz-transition: opacity 250ms;
-ms-transition: opacity 250ms;
-o-transition: opacity 250ms;
transition: opacity 250ms;
}
#sharebubble {
display: inline-block;
vertical-align: bottom;
}
#uibuttons {
display: inline-block;
}
#buttonpanel {
line-height: normal;
position: absolute;
right: 0;
}
#shareshortlink {
background: #ddd;
border: none;
color: #fff;
font-weight: bold;
margin: 0;
outline: none;
padding: 10px;
vertical-align: top;
width: 120px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#shareshortlink::-ms-clear {
display: none;
}
#uipanel {
bottom: 40px;
height: 32px;
margin: 0 auto;
opacity: 0;
position: relative;
width: 572px;
}
.mobile #uipanel {
bottom: auto;
top: 4px;
right: 4px;
width: 100%;
position: absolute;
}
#movecounter {
bottom: -8px;
color: #ddd;
display: inline-block;
font-family: "Rubik One";
font-size: 14pt;
left: 0;
position: absolute;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
.mobile #movecounter {
bottom: auto;
top: 0;
color: #555;
padding: 4px 20px;
font-size: 16pt;
font-weight: bold;
}
.upgradetext, .helptext {
font-family: arial;
font-size: 12pt;
font-weight: bold;
width: 120px;
color: #999;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
.helptext {
font-family: arial;
font-size: 12pt;
font-weight: bold;
width: 200px;
color: #999;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
#helpnext {
padding-top: 10px;
cursor: pointer;
}
#helpimage{
width:160px;
height: 123px;
background-size:160px 123px;
}
#helpimage.one{
width:140px;
height: 100px;
background-size:140px 100px;
}
#helpimage.two{
width:140px;
height: 100px;
background-size:140px 100px;
}

注意：

由于博客字数限制，本篇文章所展示的代码并不全面，仅可供参考之用。关于本项目的完整代码及其素材已上传至资源，大家自行去下载就好

3d css html javascript 前端

本站无任何商业行为
个人在线分享 » Web前端项目-交互式3D魔方【附源码】

admin 钻石

分享到：

E-->