Merge pull request #193 from Taimoor0217/master

add rotating-card

snippets/rotating-card.md

@@ -0,0 +1,65 @@
+---
+title: Rotating Card
+tags: animation,advanced
+---
+
+Creates a two sided card which rotates on hover.
+
+- 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.
+
+```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>
+```
+
+```css
+.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); 
+}
+```