From 7ef1b7d7ed76badf5f2c9f4c84271c6b5587aa0c Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Sun, 4 Oct 2020 14:24:04 +0300
Subject: [PATCH] Update rotating-card.md

---
 snippets/rotating-card.md | 96 +++++++++++++++++++--------------------
 1 file changed, 48 insertions(+), 48 deletions(-)

diff --git a/snippets/rotating-card.md b/snippets/rotating-card.md
index 6deccd96..b37afb86 100644
--- a/snippets/rotating-card.md
+++ b/snippets/rotating-card.md
@@ -5,61 +5,61 @@ tags: animation,advanced
 
 Creates a two sided card which rotates on hover.
 
-- Set the the `backface-visibility ` of the cards to none.
+- Set the the `backface-visibility` of the cards to none.
 - Initially `rotateY` the back side of the card by `-180deg` and the front side to `0deg`.
 - Upon hover, `rotateY` the front side to `180deg` and backside to `0deg`.
-- Set the appropriate `perspective ` value to create the rotate effect .
+- Set the appropriate `perspective` value to create the rotate effect.
 
 ```html
 <div class="card">
-      <div class="card-side front">
-          <div>
-              Front Side
-          </div>        
-      </div>
-      <div class="card-side back">
-          <div>
-              Back Side
-          </div>           
-      </div>
+  <div class="card-side front">
+    <div>Front Side</div>        
+  </div>
+  <div class="card-side back">
+    <div>Back Side</div>           
+  </div>
 </div>
 ```
 
 ```css
-  .card {
-    perspective: 150rem;
-    -moz-perspective: 150rem;
-    position: relative;
-    height: 40rem;
-    max-width: 400px;
-    margin: 2rem;
-    box-shadow: none;
-  }
-  .card-side {
-    height: 35rem;
-    border-radius: 15px;
-    transition: all 0.8s ease;
-    backface-visibility: hidden;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 80%; 
-    padding:2rem;
-    color: white
-  }
-  .card-side.back {
-      transform: rotateY(-180deg);
-      background-color: #4158D0;
-      background-image: linear-gradient(43deg, #4158D0 0%,#C850C0 46%, #FFCC70 100%);
-  }
-  .card-side.front {
-      background-color: #0093E9;
-      background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
-  }
-  .card:hover .card-side.front {
-    transform: rotateY(180deg); 
-  }
-  .card:hover .card-side.back {
-    transform: rotateY(0deg); 
-  }
+.card {
+  perspective: 150rem;
+  position: relative;
+  height: 40rem;
+  max-width: 400px;
+  margin: 2rem;
+  box-shadow: none;
+}
+
+.card-side {
+  height: 35rem;
+  border-radius: 15px;
+  transition: all 0.8s ease;
+  backface-visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 80%; 
+  padding:2rem;
+  color: white
+}
+
+.card-side.back {
+  transform: rotateY(-180deg);
+  background-color: #4158D0;
+  background-image: linear-gradient(43deg, #4158D0 0%,#C850C0 46%, #FFCC70 100%);
+}
+
+.card-side.front {
+  background-color: #0093E9;
+  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
+}
+
+.card:hover .card-side.front {
+  transform: rotateY(180deg); 
+}
+
+.card:hover .card-side.back {
+  transform: rotateY(0deg); 
+}
 ```