Card Flipping Effect

Card Flipping Effect.markdown

Card Flipping Effect

A Pen by Sonya Moisset on CodePen.

License.

index.html

<div class="card-container">
  <div class="card">
    <div class="front"><h1>Front</h1></div>
    <div class="back"><h1>Back</h1></div>
  </div>
   <div class="card">
    <div class="front"><h1>Front</h1></div>
    <div class="back"><h1>Back</h1></div>
  </div>
   <div class="card">
    <div class="front"><h1>Front</h1></div>
    <div class="back"><h1>Back</h1></div>
  </div>
</div>

style.css

h1 {
  margin: 0;
}

.card-container {
  perspective: 700;
}

.card {
  position: relative;
  display: inline-block;
  color: #fff;
  text-align: center;
  line-height: 200px;
  margin: 20px;
  width: 200px;
  height: 200px;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}

.front, .back {
  position: absolute;
  top:0;
  left:0;
  width: 200px;
  height: 200px;
  backface-visibility: hidden;
}

.front {
  background: #88ff55;
}

.back {
  background: #ff8855;
  transform: rotateY(180deg);
}

.card:hover {
  transform: rotateY(180deg);
}