animal

2022-01-21 10:46:22 -05:00 · 2022-01-21 10:46:22 -05:00 · 3ce6cdce41
commit 3ce6cdce41
parent ae2542e3e0
3 changed files with 80 additions and 4 deletions
--- a/animal/index.html
+++ b/animal/index.html
@ -7,10 +7,17 @@
    <title>Animal Crossing Monopoly</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../menu/menu.css">
+
 </head>
 <body>
-    <main>
-        
-    </main>
+    <div id="container">
+        <div class="card">
+            <figure class="front"></figure>
+            <figure class="back"></figure>
+        </div>
+                </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <script src="script.js"></script>
 </body>
 </html>
--- a/animal/script.js
+++ b/animal/script.js
@ -8,4 +8,24 @@ fish = [{
    color: "light blue",
    value: "2",
    img: ""
-}]
+    }];
+
+// Get the element
+let elem = document.querySelector('.card');
+
+// Update the ID and add a class
+// clone.classList.add('text-large1');
+
+// Inject it into the DOM
+for (let i = 0; i < 100; i++){
+    // elem.after(clone);
+    let clone = elem.cloneNode(true);
+    elem.after(clone);
+    // elem.parentNode.appendChild(clone)
+}
+
+$('.card').on('click', function (e) {
+    e.preventDefault();
+
+    $(this).toggleClass('flipped');
+});
--- a/animal/style.css
+++ b/animal/style.css
@ -0,0 +1,49 @@
+#container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-content: center;
+  width: 100vw;
+  height: 100vh;
+  flex-wrap: wrap;
+  /* position: relative; */
+  perspective: 20000px;
+  margin:1rem;
+  /* margin: 20px auto; */
+  /* border-radius: 100px; */
+}
+
+.card {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  /* position: absolute; */
+  transform-style: preserve-3d;
+  transition: transform .5s;
+  border-radius: 100px;
+}
+
+.card figure {
+  margin: 0;
+  padding: .5rem;
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  border-radius: 100px;
+  /* border-radius: 100px; */
+}
+
+.card .front {
+  background: lightseagreen
+}
+
+.card .back {
+  background: lightsalmon;
+  transform: rotateY(180deg);
+}
+
+.card.flipped {
+  transform: rotateY(180deg);
+}