How to create: 3D flip box

Learn how to create a flip box using CSS.

How to create a flip box

Step 1 - Add HTML:

<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>

Step 2 - Add CSS:

/* Flip box container - Set the desired width and height. We added the border attribute to demonstrate that the flip itself goes beyond the box when the mouse hovers over it (if you do not want 3D effect, please delete perspective) */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this line if 3D effect is not needed */
}
/* This container is used to position the front and back */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Perform a horizontal flip when the mouse moves over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
/* Position the front and back */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Set the style for the front */
.flip-box-front {
  background-color: #bbb;
  color: black;
}
/* Set the style for the back */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

Try it yourself

Vertical Flip

To perform a vertical flip instead of a horizontal flip, please use rotateX method instead of rotateY:

Example

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

Try it yourself

Note:These examples may not work properly on tablets and/or mobile phones.

Related Pages

Tutorial:CSS 2D Transformation

Tutorial:CSS 3D Transformation