feat: added 3d

letier3110 · Jan 19, 2023 · 58bab61 · 58bab61
1 parent c31454e
commit 58bab61
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/App.css b/src/App.css
@@ -12,6 +12,11 @@ body {
   text-align: center;
 }
 
+.boardParent {
+  perspective: 881px;
+  perspective-origin: 50% 107%;
+}
+
 .root {
   width: 100%;
   min-height: calc(100vh - 32px);
@@ -21,6 +26,8 @@ body {
   flex-direction: column;
 
   align-items: center;
+
+  transform: translate3d(0px, 0px, -100px) rotate3d(1, 0, 0, 22deg);
 }
 
 .duel {

diff --git a/src/App.tsx b/src/App.tsx
@@ -20,13 +20,14 @@ function App() {
   return (
     <>
       {gameMode === GAME_MODES.INTRO && (
-        <div>
+        <div className='boardParent'>
           <GhostPreviewProvider>
             <Intro />
           </GhostPreviewProvider>
         </div>
       )}
       <div
+        className='boardParent'
         style={{
           display: gameMode === GAME_MODES.TUTORIAL ? 'block' : 'none'
         }}
@@ -37,6 +38,7 @@ function App() {
       </div>
       {gameMode === GAME_MODES.MAIN_MENU && (
         <div
+          className='boardParent'
           style={{
             display: gameMode === GAME_MODES.MAIN_MENU ? 'block' : 'none'
           }}
@@ -47,6 +49,7 @@ function App() {
         </div>
       )}
       <div
+        className='boardParent'
         style={{
           display: gameMode === GAME_MODES.DUEL_FUNCTION ? 'block' : 'none'
         }}
@@ -58,6 +61,7 @@ function App() {
         </GhostPreviewProvider>
       </div>
       <div
+        className='boardParent'
         style={{
           display: gameMode === GAME_MODES.ARITHMETICS ? 'block' : 'none'
         }}
@@ -69,6 +73,7 @@ function App() {
         </GhostPreviewProvider>
       </div>
       <div
+        className='boardParent'
         style={{
           display: gameMode === GAME_MODES.PLOTTING ? 'block' : 'none'
         }}