Card Flip Animation (#2364)

Co-authored-by: Sophia Brandt <16630701+sophiabrandt@users.noreply.github.com>
zero-to-mastery · Oct 27, 2023 · 18cd04b · 18cd04b
1 parent 5be0b11
commit 18cd04b
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 0 deletions.
diff --git a/Art/DhanushNehru/card_flip.gif b/Art/DhanushNehru/card_flip.gif
diff --git a/Art/DhanushNehru/index.html b/Art/DhanushNehru/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <title>Card Flip</title>
+<head>
+  <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+  <div class="container">
+    <div class="object">
+      <div class="card">
+        <div class="front-side"></div>
+        <div class="back-side"></div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/Art/DhanushNehru/styles.css b/Art/DhanushNehru/styles.css
@@ -0,0 +1,55 @@
+html, body {
+    height: 100%;
+    background: #000;
+    margin: 0;
+    overflow: hidden;
+  }
+
+  .container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .object {
+    width: 300px;
+    height: 420px;
+    position: relative;
+    animation: flip 2s alternate infinite ease-in-out;
+    transform-style: preserve-3d;
+  }
+
+  .card {
+    width: 300px;
+    height: 420px;
+    position: absolute;
+    transform-style: preserve-3d;
+    animation: flip 2s alternate infinite ease-in-out;
+    backface-visibility: hidden;
+  }
+
+  @keyframes flip {
+    0% { transform: rotateY(0deg); }
+    100% { transform: rotateY(180deg); }
+  }
+
+  .front-side {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    backface-visibility: hidden;
+    background: #3498db; /* Blue color on the front side */
+    transform: rotateY(0deg);
+  }
+
+  .back-side {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    backface-visibility: hidden;
+    background: #FF5733; /* Red color on the back side */
+    transform: rotateY(180deg);
+  }
+
diff --git a/include.js b/include.js
@@ -2468,6 +2468,13 @@ const cards = [
     author: 'Bhavna',
     githubLink: 'https://github.com/Bhavna2003'
   },
+  {
+    artName: 'Card Flip Animation',
+    pageLink: './Art/DhanushNehru/index.html',
+    imageLink: './Art/DhanushNehru/card_flip.gif',
+    author: 'Dhanush',
+    githubLink: 'https://github.com/DhanushNehru'
+  },
   {
     artName: 'Wave Animation',
     pageLink: '.Art/runtimeerror11/index.html',