diff --git a/snippets/rotating-card.md b/snippets/rotating-card.md
index 6deccd966..b37afb865 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
```
```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);
+}
```