How To Create 3D Flip Box Using Pure CSS

Create 3D Flip Box


In this article we will learn how we create a 3d Flip box by using pure CSS. We will also provide the full source code. And also provide the demo. So lets get start.

Where We Use

CSS (Case Cading Style Sheet) is used to design any type of website or tools etc. This 3d Effect are mainly create in CSS. So you will also use this effect in your any static page. Or you can also edit yourself and try to do different Design according to yourself.

We always provide this type of Programming information so that you will also use in your website or blog, and make your blog beautiful and attractive. So it all depends yours that how and where you use this. According to us you can use this in your about us section like us, Otherwise you can use anywhere.


Front Side

Back Side


.flip-box {
  background-color: transparent;
  width: 100%;
  height: 250px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  box-shadow: black 10px 5px;
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
.flip-box-front {
  background-color: red;
  color: black;
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);

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

I Hope You will understand that effect and soon we launched our Java script Tutorials where we provide different types of Programming or projects by using Java Scripts.
Show comments
Hide comments