Update rotating-card.md

ushakov-igor · Oct 4, 2020 · 7ef1b7d · 7ef1b7d
1 parent 7c9fd63
commit 7ef1b7d
Showing 1 changed file with 48 additions and 48 deletions.
diff --git 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); 
+}
 ```