Created a 3D box animation (#2403)

Co-authored-by: Sophia Brandt <16630701+sophiabrandt@users.noreply.github.com>
zero-to-mastery · Oct 31, 2023 · 820178f · 820178f
1 parent 81cb4fc
commit 820178f
Show file tree

Hide file tree

Showing 4 changed files with 152 additions and 0 deletions.
diff --git a/Art/Bhavna2003/3DboxAnimation/3Dbox.gif b/Art/Bhavna2003/3DboxAnimation/3Dbox.gif
diff --git a/Art/Bhavna2003/3DboxAnimation/index.html b/Art/Bhavna2003/3DboxAnimation/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css"/>
+    <title>3D_Animation</title>
+</head>
+<body>
+    <header></header>
+        <div class="wrap">
+            <div class="cube">
+                <div class="front">
+                    <h2>Marilyn Monroe</h2>
+                    “I’m selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can’t handle me at my worst, then you sure as hell don’t deserve me at my best.”
+                </div>
+                <div class="back">
+                    <h2>Helen Keller</h2>
+                    “When one door of happiness closes, another opens; but often we look so long at the closed door that we do not see the one which has been opened for us.”
+                </div>
+                <div class="top">
+                    <h2>Audre Lorde</h2>
+                    “When I dare to be powerful – to use my strength in the service of my vision, then it becomes less and less important whether I am afraid.”
+                </div>
+                <div class="bottom">
+                    <h2>Leonardo Da Vinci</h2>
+                    “It had long since come to my attention that people of accomplishment rarely sat back and let things happen to them. They went out and happened to things.”
+                </div>
+                <div class="left">
+                    <h2>Dax Shepard</h2>
+                   “Success is just a war of attrition. Sure, there’s an element of talent you should probably possess. But if you just stick around long enough, eventually something is going to happen.”
+                </div>
+                <div class="right">
+                    <h2>Harriet Tubman</h2>
+                    “Every great dream begins with a dreamer. Always remember, you have within you the strength, the patience, and the passion to reach for the stars to change the world.”
+                </div>
+            </div>
+        </div>
+</body>
+</html>
diff --git a/Art/Bhavna2003/3DboxAnimation/style.css b/Art/Bhavna2003/3DboxAnimation/style.css
@@ -0,0 +1,107 @@
+body {
+    background-color: #eee;
+}
+header{
+    text-align: center ;
+    font-size: 18px;
+    color: rgba(25, 25,25, 1);
+}
+
+.wrap {
+    margin-top: 150px;
+    perspective: 1000px;
+    perspective-origin: 50% 50%;
+    background-size: 80px 80px;
+} 
+
+.cube {
+    margin: auto;
+    position: relative;
+    height: 200px;
+    width: 200px;
+    transform-style: preserve-3d;
+}
+
+.cube div {
+    position: absolute;
+    padding: 10px;
+    box-sizing: border-box;
+    height: 100%;
+    width: 100%;
+    opacity: 0.9;
+    border: solid 1px #eee;
+    color: #fff;
+    font: 10px arial;
+    transition: transform 0.2s ease-in;
+}
+.front {
+    background-color: rgba(255, 0, 0, .6);
+    transform: translateZ(100px);
+}
+
+.back {
+    background-color: rgba(0, 255, 0, .6);
+    transform: translateZ(-100px) rotateY(180deg);
+}
+
+.right {
+    background-color: rgba(0, 0, 255, .6);
+    transform: rotateY(-270deg) translateX(100px);
+    transform-origin: top right;
+}
+
+.left {
+    background-color: rgba(255, 255, 0, .6);
+    transform: rotateY(270deg) translateX(-100px);
+    transform-origin: center left;
+}
+
+.top {
+    background-color: rgba(255, 0, 255, .6);
+    transform: rotateX(-270deg) translateY(-100px);
+    transform-origin: top center;
+}
+
+.bottom {
+    background-color: rgba(0, 0, 0, .6);
+    transform: rotateX(270deg) translateY(100px);
+    transform-origin: bottom center;
+}
+
+@keyframes rotate {
+    from {
+        transform: rotateX(0deg) rotateY(0deg);
+    }
+
+    to {
+        transform: rotateX(360deg) rotateY(360deg);
+    }
+}
+
+.cube {
+    animation: rotate 20s infinite linear;
+}
+
+.wrap:hover .front {
+    transform: translateZ(200px);
+}
+
+.wrap:hover .back {
+    transform: translateZ(-200px) rotateY(180deg);
+}
+
+.wrap:hover .right {
+    transform: rotateY(-270deg) translateZ(100px) translateX(100px);
+}
+
+.wrap:hover .left {
+    transform: rotateY(270deg) translateZ(100px) translateX(-100px);
+}
+
+.wrap:hover .top {
+    transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
+}
+
+.wrap:hover .bottom {
+    transform: rotateX(270deg) translateZ(100px) translateY(100px);
+}
diff --git a/include.js b/include.js
@@ -2747,6 +2747,11 @@ let cards = [
     author: 'Urja', 
     githubLink: 'https://github.com/urjabahad'
   },
+  {
+    artName: '3D Box Animation',
+    pageLink: './Art/Bhavna2003/3DboxAnimation/index.html',
+    imageLink: './Art/Bhavna2003/3DboxAnimation/3Dbox.gif',
+  },
   {
     artName: 'Loading Text Animation',
     pageLink: './Art/Bhavna2003/loadingtextanimation/index.html',