new: cube animation

lezette · Oct 3, 2024 · 3c7d186 · 3c7d186
1 parent 950c03a
commit 3c7d186
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 3 deletions.
diff --git a/cube/index.html b/cube/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="container">
+
+    <div class="cube">
+      <div class="side front"></div>
+      <div class="side back"></div>
+      <div class="side right"></div>
+      <div class="side left"></div>
+      <div class="side top"></div>
+      <div class="side bottom"></div>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/cube/style.css b/cube/style.css
@@ -0,0 +1,94 @@
+.container {
+  perspective: 2000px;
+  margin: 10rem 20rem;
+  animation: rotate-cube 20s linear infinite alternate-reverse forwards;
+  perspective-origin: 50% 50%;
+
+  .cube {
+    width: 200px;
+    height: 200px;
+    /* border: 1.5px solid whitesmoke; */
+    position: relative;
+    border-radius: 10px;
+    transform-style: preserve-3d;
+    transition: transform 2s ease-in-out;
+
+    .side {
+      width: 200px;
+      height: 200px;
+      border: 1.5px solid teal;
+      border-radius: 5px;
+      position: absolute;
+      transition: transform 2s ease-in-out;
+
+      &.front {
+        background-color: teal;
+        transform: translateZ(100px);
+      }
+
+      &.back {
+        background-color: turquoise;
+        transform: translateZ(-100px);
+      }
+
+      &.right {
+        background-color: rgb(14, 60, 60);
+        transform: translateX(100px) rotateY(90deg);
+      }
+      &.left {
+        background-color:deepskyblue;
+        transform: translateX(-100px) rotateY(-90deg);
+      }
+      &.top {
+        background-color:dodgerblue;
+        transform: translateY(100px) rotateX(90deg);
+      }
+      &.bottom {
+        background-color: mediumaquamarine;
+        transform: translateY(-100px) rotateX(-90deg);
+      }
+    }
+
+  }
+}
+
+.cube:hover {
+  .side.front {
+    transform: translateZ(150px);
+  }
+  .side.back {
+    transform: translateZ(-150px);
+  }
+  .side.right {
+    transform: translateX(150px) rotateY(90deg);
+  }
+  .side.left {
+    transform: translateX(-150px) rotateY(-90deg);
+  }
+  .side.top {
+    transform: translateY(150px) rotateX(90deg);
+  }
+  .side.bottom {
+    transform: translateY(-150px) rotateX(-90deg);
+  }
+
+}
+
+
+@keyframes rotate-cube {
+  0% {
+    perspective-origin: 50% 50%;
+  }
+  25% {
+    perspective-origin: 1000px 50%;
+  }
+  50% {
+    perspective-origin: 50% 1000px;
+  }
+  75% {
+    perspective-origin: -1000px 50%;
+  }
+  100% {
+    perspective-origin: 50% -1000px;
+  }
+}
diff --git a/portal/style.css b/portal/style.css
@@ -1,3 +1,12 @@
+body {
+  background-color: #efe8dd;
+  overflow: hidden;
+  /* background: linear-gradient(#ced5d3, #ced5d3 144px, #efe8dd 144px, #efe8dd 100%); */
+  background-color: black;
+  width: 90%;
+}
+
+
 article.container {
   perspective: 2600px;
 }
@@ -7,7 +16,7 @@ article.container {
 }
 
 .stage {
-   margin: 0 auto;
+  margin: 0 auto;
   transform-style: preserve-3d;
   transform: rotateY(-45deg);
   width: 460px;
@@ -18,6 +27,18 @@ article.container {
   transform-style: preserve-3d;
 }
 
+
+.stage .shadow {
+  background-color: transparent;
+  box-shadow: -600px -20px 40px #787471;
+  height: 500px;
+  transform: rotateX(90deg) translateZ(-350px) translateX(500px);
+  width: 550px;
+  position: absolute;
+  top: -100px;
+}
+
+
 .stage .back-left {
   background-color: #6b522b;
   border-left: 6px solid #574625;
@@ -61,7 +82,6 @@ article.container {
 .stage .pit-right {
   background-color: #847660;
   height: 800px;
-
   transform: translate3D(254px, 125px, 173px);
   width: 451px;
 }
@@ -70,4 +90,5 @@ article.container {
   height: 220px;
   transform: rotateY(90deg) translate3D(-200px, 87px, 168px);
   width: 170px;
-} 
+}
+