From 493660ddb6731e1381ec9b7efa1ce2fb3887c4cf Mon Sep 17 00:00:00 2001 From: elizabeth Date: Fri, 4 Oct 2024 11:53:29 +0100 Subject: [PATCH] new: setup bouncy cube --- bouncyCube/index.html | 20 +++++++++++++++++ bouncyCube/style.css | 51 +++++++++++++++++++++++++++++++++++++++++++ portal/style.css | 3 +-- 3 files changed, 72 insertions(+), 2 deletions(-) create mode 100644 bouncyCube/index.html create mode 100644 bouncyCube/style.css diff --git a/bouncyCube/index.html b/bouncyCube/index.html new file mode 100644 index 0000000..9df33ac --- /dev/null +++ b/bouncyCube/index.html @@ -0,0 +1,20 @@ + + + + + + + Document + + + + + +
+
+
+
+
+ + + \ No newline at end of file diff --git a/bouncyCube/style.css b/bouncyCube/style.css new file mode 100644 index 0000000..7de0045 --- /dev/null +++ b/bouncyCube/style.css @@ -0,0 +1,51 @@ +:root { + --boxColor: #0ff7; +} + +body { + background-color: black; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + font-size: 75px; + perspective: 10em; + perspective-origin: 50% calc(50% - 2em); +} + + + + +.stage { + position: relative; + transform-style: preserve-3d; +} + +.ball { + width: 1em; + height: 1em; + border-radius: 50%; + background-color: white; + position: absolute; + left: -.5em; + bottom: 1em; +} + +.cube { + width: 2em; + height: 2em; + background-color: var(--boxColor); + position: absolute; + top: -1em; + left: -1em; +} + +.floor { + position: absolute; + top: 1em; + width: 15em; + height: 15em; + transform: translate(-50%, -50%) rotateX(90deg); + background-image: repeating-conic-gradient(from 45deg, #111 0deg 90deg, #222 90deg 180deg); + background-size: 1em 1em; +} \ No newline at end of file diff --git a/portal/style.css b/portal/style.css index dcf3ce5..7319ee5 100644 --- a/portal/style.css +++ b/portal/style.css @@ -1,8 +1,7 @@ body { background-color: #efe8dd; overflow: hidden; - /* background: linear-gradient(#ced5d3, #ced5d3 144px, #efe8dd 144px, #efe8dd 100%); */ - background-color: black; + background: linear-gradient(#ced5d3, #ced5d3 144px, #efe8dd 144px, #efe8dd 100%); width: 90%; }