From 1d1f1d9ca2188947ea57ae79e1aef6a6d0fb9e6f Mon Sep 17 00:00:00 2001
From: Weslie0803 <zhengsx19@mails.tsinghua.edu.cn>
Date: Fri, 28 Oct 2022 13:30:42 +0800
Subject: [PATCH] 3d effect

---
 index.html           | 167 ++++++++++++++++++++++++-------------------
 index.js             |   4 +-
 new3d.css            |  75 +++++++++++++++++++
 scripts.72999ec6.css |   4 ++
 4 files changed, 174 insertions(+), 76 deletions(-)

diff --git a/index.html b/index.html
index f0c16c8..7a619fa 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/index.js b/index.js
index 5e362cf..387f98a 100644
--- a/index.js
+++ b/index.js
@@ -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
diff --git a/new3d.css b/new3d.css
index a7e887f..71d0326 100644
--- a/new3d.css
+++ b/new3d.css
@@ -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)
+    }
 }
\ No newline at end of file
diff --git a/scripts.72999ec6.css b/scripts.72999ec6.css
index d18c1a6..f636a99 100644
--- a/scripts.72999ec6.css
+++ b/scripts.72999ec6.css
@@ -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;
@@ -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
 }