How To Create a 3D Flip Box using CSS

How you ever wanted to create a 3D Flip Box? Well, you are in the right place. This is basically a div which flips when you hover over a certain element and can be achieved using CSS alone. You can use JavaScript and jQuery, but if you can use just CSS alone, it’s always better right? We’re not a ‘huge’ fan of the effect in 2020 but I guess it’s always down to personal preference really. I guess it’s good if you want to compress the amount of information you have on the page as you can add whatever content you want on the front and back of these flip elements. So let’s get started…

How To Create a Flip Box

You can view this effect on CodePen by clicking here.

So firstly, add your HTML markup:


<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>Back Side</h2>
    </div>
  </div>
</div>

Now, we just need to add the following CSS:


* {
  font-family: 'Arial', sans-serif;
}

/* The Container for Flip Box - Set the width and height to whatever you want. */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-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-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Style the front side */
.flip-box-front {
  background-color: #e1e1e1;
  color: #000;
}

/* Style the back side */
.flip-box-back {
  background-color: #20232c;
  color: #FFF;
  transform: rotateY(180deg);
}

Note: We added flex positioning to these elements; .flip-box-front, .flip-box-back to center the content within the box. Remove the following attributes if you want the content to be displayed from the top; display: flex;, align-items: center; and justify-content: center;

Now, let’s take this one step further, fancy doing a vertical flip instead? Then check the below.

How To Create a Vertical Flip Box

To do a vertical flip instead of a horizontal, all we need to do is use rotateX method instead of rotateY as follows:


.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}

.flip-box-back {
  transform: rotateX(180deg);
}

Again, you can check out the CodePen example by clicking here.

And that’s it, flippin’ simple right?

WordPress / Web Development Tutorials
(Best WordPress Tutorials)