smartium · July 26, 2022 22:24 · Jul 26, 2022
diff --git a/flip-card-with-js.markdown b/flip-card-with-js.markdown
@@ -0,0 +1,7 @@
+Flip card with JS
+-----------------
+
+
+A [Pen](https://codepen.io/smartiumdev/pen/OJvxWVv) by [SMARTIUM](https://codepen.io/smartiumdev) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/license/pen/OJvxWVv).
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<button id="btn" class="btn btn--blue">Flip card</button>
+
+<div class="card js-card">
+  <div class="card__wrapper">
+    <div class="card__side is-active">
+      <h1>FRONT</h1>
+      <h1>FRONT</h1>
+      <h1>FRONT</h1>
+    </div>
+    <div class="card__side card__side--back">
+      <h2>BACK</h2>
+      <h2>BACK</h2>
+      <h2>BACK</h2>
+      <h2>BACK</h2>
+      <h2>BACK</h2>
+      <h2>BACK</h2>
+    </div>
+  </div>
+</div>
+
+<h1 class="title">WHAT THE HEIGHT!</h1>
diff --git a/script.babel b/script.babel
@@ -0,0 +1,19 @@
+let cardTransitionTime = 500;
+
+let $card = $('.js-card')
+let switching = false
+
+$('#btn').click(flipCard)
+
+function flipCard () {
+   if (switching) {
+      return false
+   }
+   switching = true
+
+   $card.toggleClass('is-switched')
+   window.setTimeout(function () {
+      $card.children().children().toggleClass('is-active')
+      switching = false
+   }, cardTransitionTime / 2)
+}
diff --git a/scripts b/scripts
@@ -0,0 +1 @@
+<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
diff --git a/style.scss b/style.scss
@@ -0,0 +1,138 @@
+$card-transition-time: 0.5s;
+
+
+
+
+
+.card {
+   perspective: 600px;
+   position: relative;
+
+   &.is-switched {
+      .card__wrapper {
+         animation: rotate $card-transition-time linear both;
+      }
+   }
+}
+
+   .card__wrapper {
+      transform-style: preserve-3d;
+      animation: rotate-inverse $card-transition-time linear both;
+   }
+
+   .card__side {
+      backface-visibility: hidden;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+
+      &.is-active {
+         position: static;
+      }
+   }
+
+
+   .card__side--back {
+      transform: rotateY(180deg);
+   }
+
+
+
+
+
+@keyframes rotate {
+  0% {
+    transform: rotateY(0);
+  }
+  70% {
+    transform: rotateY(200deg);
+  }
+  100% {
+    transform: rotateY(180deg);
+  }
+}
+
+@keyframes rotate-inverse {
+  0% {
+    transform: rotateY(180deg);
+  }
+  70% {
+    transform: rotateY(-20deg);
+  }
+  100% {
+    transform: rotateY(0);
+  }
+}
+
+
+
+
+
+// ignore
+
+* {
+   box-sizing: border-box;
+}
+
+body {
+   background-color: #5a5a5a;
+   text-align: center;
+   padding: 1.5rem;
+}
+
+h1,
+h2 {
+   margin: 0;
+}
+
+.card {
+   margin: 2rem auto;
+   max-width: 350px;
+}
+
+.card__side {
+   padding: 1em;
+   border-radius: 5px;
+   color: white;
+   background-color: #ff4136;
+}
+
+
+.card__side--back {
+   background-color: #0074d9;
+}
+
+.btn {
+   outline: none;
+   border: none;
+   border-radius: 5px;
+   padding: 15px 25px;
+   font-size: 22px;
+   text-decoration: none;
+   margin: 20px;
+   color: #fff;
+   position: relative;
+   display: inline-block;
+   text-transform: uppercase;
+   font-weight: 600;
+
+   &:active {
+      transform: translate(0px, 5px);
+      box-shadow: 0px 1px 0px 0px rgba(#000, .25);   
+   }
+}
+
+
+.btn--blue {
+   background-color: #55acee;
+   box-shadow: 0px 5px 0px 0px #3C93D5;
+
+   &:hover {
+      background-color: #6FC6FF;
+   }
+}
+
+.title {
+   color: #fff;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>