html, css and js

guldus98 · guldus98 · commit c36bf3576252 · 2019-03-02T08:21:10.000+03:00
diff --git a/Growing Card Flip/Growing Card Flip.css b/Growing Card Flip/Growing Card Flip.css
@@ -0,0 +1,54 @@
+﻿body{
+    background: #eee;
+    padding: 0;
+    margin: 0;
+}
+.container{
+    font-family: Verdana;
+    font-weight: bold;
+    font-size: 75px;
+    width: 400px;
+    height: 250px;
+    border-radius: 10px;
+    perspective: 1400px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+}
+.card {
+    position: relative;
+    height: 100%;
+    border-radius: 10px;
+    width: 100%;
+    transform-style: preserve-3d;
+    transition-delay: 1s;
+    transition: 1s ease-in-out;
+    cursor: pointer;
+}
+.front, .back {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    border-radius: 10px;
+    text-align: center;
+}
+.back {
+    color: #fff;
+    background: #bc2828;
+    transform: rotateY(180deg);
+}
+.front {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #fff;
+    color: #bc2828;
+}
+.card.active {
+    transform: rotateY(180deg) rotateX(360deg) scale(2.5);
+
+}
diff --git a/Growing Card Flip/Growing Card Flip.html b/Growing Card Flip/Growing Card Flip.html
@@ -0,0 +1,34 @@
+﻿<!DOCTYPE html>
+
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>page</title>
+    <link rel="stylesheet" type="text/css" href="Growing Card Flip.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
+</head>
+<body>
+
+    <div class="container">
+        <div class="card">
+            <div class="front">
+                Front
+            </div>
+            <div class="back">
+                Back
+            </div>
+        </div>
+    </div>
+
+    <script>
+
+        let card = document.querySelector(".card");
+        card.addEventListener("click", function () {
+            card.classList.toggle("active");
+        });
+
+    </script>
+
+</body>
+</html>
diff --git a/Growing Card Flip/Screenshot_2.png b/Growing Card Flip/Screenshot_2.png
