Style a FlipCard

Links

https://www.w3schools.com/howto/howto_css_flip_card.asp

Introduction

This post contains may notes on the example of a flip card from W3Schools here. The article is not written in a beginner friendly way, I personally feel. It could do with more text describing what each part of the markup and CSS does which this article tries to add.

FlipCards

A FlipCard is a rectangular area that has a front- and a back side. The 3D capabilities of CSS are used to turn the card around by 180 degrees to reveal the card’s flipside. This adds an interesting and interactive effect to a page and also saves some space for detailed information on the item displayed on the front of the card. 

Strategy

The HTML markup contains an outer div that is used to position the flip-card on the page.

Inside the outer div, there is an inner div which will rotate on hover. That inner div contains two nested divs. One is called front-side, the other one is called back-side. Both the front- and back-side are set to not render their back-facing side, that means, when the back-facing side faces the viewer, that side is not rendered by the browser.

Initially the nested front-side is not rotated or rotated by 0 degrees, whereas the back-side is initially turned around, so it is initially rotated by 180 degrees. The front- and back-side are not rotated any more from here on out, only the inner div is rotated.

HTML Markup

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="https://picsum.photos/300/200" alt="Avatar" style="width:300px;height:100%">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
    </div>
  </div>
</div>

You can see the outer flip-card to position the entire card and the inner flip-card that contains the front and back side divs.

CSS Styling

The outer flip-card contains the dimensions and the perspective attribute which introduces a real 3D rotation effect.

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  border: 0px solid #f1f1f1;
  perspective: 1000px;
}

The inner flip-card has two styles, on normal style and one style on hover.

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  /* On hover, rotate the inner card which will rotate the front and backside with it */
  transform: rotateY(180deg);
}

The nested front- and back-side share some styles but also have styles specifically for themselves. One important specific style is the initial rotate of either 0 degrees or 180 degress.

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
  /* initially not rotated */
  transform: rotateY(0deg);
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  /* initially rotated by 180 degree */
  transform: rotateY(180deg);
}

Leave a Reply