Update rotating-card.md

snippets/rotating-card.md

@@ -5,37 +5,33 @@ 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>
+    <div>Front Side</div>        
-              Front Side
-          </div>        
   </div>
   <div class="card-side back">
-          <div>
+    <div>Back Side</div>           
-              Back Side
-          </div>           
   </div>
 </div>
 ```
 
 ```css
-  .card {
+.card {
   perspective: 150rem;
-    -moz-perspective: 150rem;
   position: relative;
   height: 40rem;
   max-width: 400px;
   margin: 2rem;
   box-shadow: none;
-  }
+}
-  .card-side {
+
+.card-side {
   height: 35rem;
   border-radius: 15px;
   transition: all 0.8s ease;
@@ -46,20 +42,24 @@ Creates a two sided card which rotates on hover.
   width: 80%; 
   padding:2rem;
   color: white
-  }
+}
-  .card-side.back {
+
+.card-side.back {
   transform: rotateY(-180deg);
   background-color: #4158D0;
   background-image: linear-gradient(43deg, #4158D0 0%,#C850C0 46%, #FFCC70 100%);
-  }
+}
-  .card-side.front {
+
+.card-side.front {
   background-color: #0093E9;
   background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
-  }
+}
-  .card:hover .card-side.front {
+
+.card:hover .card-side.front {
   transform: rotateY(180deg); 
-  }
+}
-  .card:hover .card-side.back {
+
+.card:hover .card-side.back {
   transform: rotateY(0deg); 
-  }
+}
 ```