Skip to content

Commit

Permalink
3d effect
Browse files Browse the repository at this point in the history
  • Loading branch information
@Weslie0803
Weslie0803 committed Oct 28, 2022
1 parent 14f25b2 commit 1d1f1d9
Show file tree
Hide file tree
Showing 4 changed files with 174 additions and 76 deletions.
167 changes: 93 additions & 74 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,88 +16,107 @@
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<div id="container" class="container">
<div id="stage" style="display: none;">
<div id="shape" class="ring backfaces cubeShow_0">
<div id="card0" class="plane one"> <img src="抽奖软件UI/数字/1.png"></div>
<div id="card1" class="plane two"> <img src="抽奖软件UI/数字/2.png"></div>
<div id="card2" class="plane three"><img src="抽奖软件UI/数字/3.png"></div>
<div id="card3" class="plane four"> <img src="抽奖软件UI/数字/4.png"></div>
<div id="card4" class="plane five"> <img src="抽奖软件UI/数字/5.png"></div>
<div id="card5" class="plane six"> <img src="抽奖软件UI/数字/6.png"></div>
<div id="card6" class="plane seven"><img src="抽奖软件UI/数字/7.png"></div>
<div id="card7" class="plane eight"><img src="抽奖软件UI/数字/8.png"></div>
<div id="card8" class="plane nine"> <img src="抽奖软件UI/数字/9.png"></div>
<div id="card9" class="plane ten"> <img src="抽奖软件UI/数字/0.png"></div>
<div id="x1" style="margin-top: 100px;">
<div id="container" class="container" >
<div id="stage" style="transform: translateZ(-250px);">
<div id="shape" class="ring8card backfaces cubeShow_0">
<div id="bg0" class="plane eine"> <img src="抽奖软件UI/底色/复合/复合1.png"> </div>
<div id="bg1" class="plane zwei"> <img src="抽奖软件UI/底色/复合/复合2.png"> </div>
<div id="bg2" class="plane drei"> <img src="抽奖软件UI/底色/金属/金属1.png"> </div>
<div id="bg3" class="plane viel"> <img src="抽奖软件UI/底色/金属/金属2.png"> </div>
<div id="bg4" class="plane funf"> <img src="抽奖软件UI/底色/非金/非金1.png"> </div>
<div id="bg5" class="plane sechs"><img src="抽奖软件UI/底色/非金/非金2.png"> </div>
<div id="bg6" class="plane seben"><img src="抽奖软件UI/底色/高分子/高分子1.png"> </div>
<div id="bg7" class="plane acht"> <img src="抽奖软件UI/底色/高分子/高分子2.png"> </div>
</div>
</div>
</div>
<div id="stage">
<div id="shape" class="ring8 backfaces cubeShow_0">
<div id="bond0" class="plane eine"> <img src="抽奖软件UI/键和方式/1-H2.png"> </div>
<div id="bond1" class="plane zwei"> <img src="抽奖软件UI/键和方式/2-水.png"> </div>
<div id="bond2" class="plane drei"> <img src="抽奖软件UI/键和方式/3-乙炔.png"> </div>
<div id="bond3" class="plane viel"> <img src="抽奖软件UI/键和方式/4-正四面体.png"> </div>
<div id="bond4" class="plane funf"> <img src="抽奖软件UI/键和方式/5-石墨.png"> </div>
<div id="bond5" class="plane sechs"><img src="抽奖软件UI/键和方式/6-丙炔.png"> </div>
<div id="bond6" class="plane seben"><img src="抽奖软件UI/键和方式/7-简单立方.png"> </div>
<div id="bond7" class="plane acht"> <img src="抽奖软件UI/键和方式/8-BCC.png"> </div>
<div id="container" class="container" >
<div id="stage" style="transform: translateZ(-250px);">
<div id="shape" class="ring8 backfaces cubeShow_0">
<div id="bond0" class="plane eine"> <img src="抽奖软件UI/键和方式/1-H2.png"> </div>
<div id="bond1" class="plane zwei"> <img src="抽奖软件UI/键和方式/2-水.png"> </div>
<div id="bond2" class="plane drei"> <img src="抽奖软件UI/键和方式/3-乙炔.png"> </div>
<div id="bond3" class="plane viel"> <img src="抽奖软件UI/键和方式/4-正四面体.png"> </div>
<div id="bond4" class="plane funf"> <img src="抽奖软件UI/键和方式/5-石墨.png"> </div>
<div id="bond5" class="plane sechs"><img src="抽奖软件UI/键和方式/6-丙炔.png"> </div>
<div id="bond6" class="plane seben"><img src="抽奖软件UI/键和方式/7-简单立方.png"> </div>
<div id="bond7" class="plane acht"> <img src="抽奖软件UI/键和方式/8-BCC.png"> </div>
</div>
</div>
</div>
<div class="row" style="display: none;">
<div class="col-xs-4">
<div id="num1" class="showNum">
<div class="CardRolling" >
<ul>
<li><img src="抽奖软件UI/底色/复合/复合1.png" width="100%" height="100%" style="display: block;"></li>
<li><img src="抽奖软件UI/底色/复合/复合2.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/金属/金属1.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/金属/金属2.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/非金/非金1.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/非金/非金2.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/高分子/高分子1.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/高分子/高分子2.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/复合/复合1.png" width="100%" height="100%" style="display: block;"></li>
</ul>
</div>
<div class="NumRolling" >
<ul>
<li><img src="抽奖软件UI/数字/0.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/1.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/2.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/3.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/4.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/5.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/6.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/7.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/8.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/9.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/0.png" style="display: block;"></li>
</ul>
</div>
<div class="BondRolling">
<ul>
<li><img src="抽奖软件UI/键和方式/1-H2.png"></li>
<li><img src="抽奖软件UI/键和方式/2-水.png"></li>
<li><img src="抽奖软件UI/键和方式/3-乙炔.png"></li>
<li><img src="抽奖软件UI/键和方式/4-正四面体.png"></li>
<li><img src="抽奖软件UI/键和方式/5-石墨.png"></li>
<li><img src="抽奖软件UI/键和方式/6-丙炔.png"></li>
<li><img src="抽奖软件UI/键和方式/7-简单立方.png"></li>
<li><img src="抽奖软件UI/键和方式/8-BCC.png"></li>
</ul>
</div>
<div id="container" class="container">
<div id="stage" style="transform: translateZ(-380px);">
<div id="shape" class="ringNum backfaces cubeShow_114514">
<div id="card0" class="plane one"> <img src="抽奖软件UI/数字/1.png"></div>
<div id="card1" class="plane two"> <img src="抽奖软件UI/数字/2.png"></div>
<div id="card2" class="plane three"><img src="抽奖软件UI/数字/3.png"></div>
<div id="card3" class="plane four"> <img src="抽奖软件UI/数字/4.png"></div>
<div id="card4" class="plane five"> <img src="抽奖软件UI/数字/5.png"></div>
<div id="card5" class="plane six"> <img src="抽奖软件UI/数字/6.png"></div>
<div id="card6" class="plane seven"><img src="抽奖软件UI/数字/7.png"></div>
<div id="card7" class="plane eight"><img src="抽奖软件UI/数字/8.png"></div>
<div id="card8" class="plane nine"> <img src="抽奖软件UI/数字/9.png"></div>
<div id="card9" class="plane ten"> <img src="抽奖软件UI/数字/0.png"></div>
</div>
</div>
<div class="col-xs-4">
<div id="num2" class="showNum"></div>
</div>
<!-- <div class="col-xs-4">
<div id="num3" class="showNum"></div>
</div>
</div>
<div class="row" style="display: none;">
<div class="col-xs-4">
<div id="num1" class="showNum">
<div class="CardRolling" >
<ul>
<li><img src="抽奖软件UI/底色/复合/复合1.png" width="100%" height="100%" style="display: block;"></li>
<li><img src="抽奖软件UI/底色/复合/复合2.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/金属/金属1.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/金属/金属2.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/非金/非金1.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/非金/非金2.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/高分子/高分子1.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/高分子/高分子2.png" width="100%" height="100%"></li>
<li><img src="抽奖软件UI/底色/复合/复合1.png" width="100%" height="100%" style="display: block;"></li>
</ul>
</div>
<div class="NumRolling" >
<ul>
<li><img src="抽奖软件UI/数字/0.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/1.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/2.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/3.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/4.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/5.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/6.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/7.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/8.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/9.png" style="display: block;"></li>
<li><img src="抽奖软件UI/数字/0.png" style="display: block;"></li>
</ul>
</div>
<div class="BondRolling">
<ul>
<li><img src="抽奖软件UI/键和方式/1-H2.png"></li>
<li><img src="抽奖软件UI/键和方式/2-水.png"></li>
<li><img src="抽奖软件UI/键和方式/3-乙炔.png"></li>
<li><img src="抽奖软件UI/键和方式/4-正四面体.png"></li>
<li><img src="抽奖软件UI/键和方式/5-石墨.png"></li>
<li><img src="抽奖软件UI/键和方式/6-丙炔.png"></li>
<li><img src="抽奖软件UI/键和方式/7-简单立方.png"></li>
<li><img src="抽奖软件UI/键和方式/8-BCC.png"></li>
</ul>
</div>
</div>
<div class="col-xs-4">
<div id="num4" class="showNum"></div>
</div> -->
</div>
<div class="col-xs-4">
<div id="num2" class="showNum"></div>
</div>
<!-- <div class="col-xs-4">
<div id="num3" class="showNum"></div>
</div>
<div class="col-xs-4">
<div id="num4" class="showNum"></div>
</div> -->
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script>
Expand Down
4 changes: 2 additions & 2 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,9 @@ $(document).ready(function () {

// Get a random number, and return as a string array
// 三等奖：抽一个数0~9
// 二等奖：先抽取4大家族之一（0~3），再抽一个数
// 二等奖：先抽取4大家族之一（0~3）（老师线下手抽，手动切换背景），再抽一个数
// 一等奖：抽取键合奇偶（0~1），抽颜色（0~7），抽数
// 特等奖：抽键合（0~7），抽颜色（0~7），抽数（0~9）
// 特等奖：抽键合（0~7），抽颜色（0~7），抽数（0~9），三步
// 因此，仍然抽一个三位数，自高位到低位分别是键合、颜色、数
var getRandomNum = function (usedNum, minNum, maxNum, size) {
//0~779，且十位不能大于7
Expand Down
75 changes: 75 additions & 0 deletions new3d.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,79 @@
}
.ring8>.acht {
transform: rotateY(315deg) translateZ(250px);
}

.ring8card>.plane img {
max-width: 200px;
max-height: 400px;
}

.ring8card>.eine {
transform: translateZ(500px);
}
.ring8card>.zwei {
transform: rotateY(45deg) translateZ(500px);
}
.ring8card>.drei {
transform: rotateY(90deg) translateZ(500px);
}
.ring8card>.viel {
transform: rotateY(135deg) translateZ(500px);
}
.ring8card>.funf {
transform: rotateY(180deg) translateZ(500px);
}
.ring8card>.sechs {
transform: rotateY(225deg) translateZ(500px);
}
.ring8card>.seben {
transform: rotateY(270deg) translateZ(500px);
}
.ring8card>.acht {
transform: rotateY(315deg) translateZ(500px);
}

.ringNum>.one {
transform: translateZ(380px)
}
.ringNum>.two {
transform: rotateX(36deg) translateZ(380px)
}
.ringNum>.three {
transform: rotateX(72deg) translateZ(380px)
}
.ringNum>.four {
transform: rotateX(108deg) translateZ(380px)
}
.ringNum>.five {
transform: rotateX(144deg) translateZ(380px)
}
.ringNum>.six {
transform: rotateX(180deg) translateZ(380px)
}
.ringNum>.seven {
transform: rotateX(216deg) translateZ(380px)
}
.ringNum>.eight {
transform: rotateX(252deg) translateZ(380px)
}
.ringNum>.nine {
transform: rotateX(-72deg) translateZ(380px)
}
.ringNum>.ten {
transform: rotateX(-36deg) translateZ(380px)
}

.cubeShow_114514 {
animation: cubeSpin114514 5s infinite linear
}

@keyframes cubeSpin114514 {
0% {
transform: rotateX(0deg)
}

to {
transform: rotateX(-1turn)
}
}
4 changes: 4 additions & 0 deletions scripts.72999ec6.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,11 +100,14 @@ body {
}

#container {
/* position: absolute;
left:0;right:0;top:0;bottom:0;margin:auto; */
perspective: 800px;
perspective-origin: 50% 225px
}

#stage {
position: absolute;
width: 100%;
height: 500px;
transition: transform 2s;
Expand Down Expand Up @@ -135,6 +138,7 @@ body {
font-size: 110pt;
color: #000;
background-color: hsla(0,0%,100%,.6);
/* background-color: transparent; */
transition: transform 2s,opacity 2s;
backface-visibility: hidden
}
Expand Down

0 comments on commit 1d1f1d9

Please sign in to comment.