Flip Card Hover

flip-card-hover.markdown

Flip Card Hover

Basic code of a hover flip card on material design using HTML and CSS3

A Pen by Wanderson Silva on CodePen.

License.

index.html

<section class="container">
  <div class="flip3D">
    <div class="back">
    </div>
    <div class="front">
    </div>
  </div>
</section>

style.css

.container {
  width: 17em;
  margin: 13% auto;
  position: relative;
}

.flip3D > .front {
  position: absolute;
  width: 15em;
  height: 18em;
  background: #03a9f4;
  border-radius: 0.3em;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transform: perspective(60em) rotateY(0deg);
  backface-visibility: hidden;
  transition: transform .5s linear 0s;
}

.flip3D > .back {
  position: absolute;
  width: 15em;
  height: 18em;
  background: #ffff00;
  border-radius: 0.3em;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transform: perspective(60em) rotateY(180deg);
  backface-visibility: hidden;
  transition: transform .5s linear 0s;
}

.flip3D:hover > .front {
  transform: perspective(60em) rotateY(-180deg);
  display
}

.flip3D:hover > .back {
  transform: perspective(60em) rotateY(0deg);
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />