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?

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

CSS – Text Rotation

If you’re trying to turn some text using rotation for elements, such as rotating text 90 degrees clockwise/counterclockwise then you’re at the right place.

So how can we achieve this? Simple! Check out the below CSS which gives you cross-browser compatibility:-


.rotate {

  transform: rotate(-90deg);


  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(-90deg);

  /* Firefox */
  -moz-transform: rotate(-90deg);

  /* IE */
  -ms-transform: rotate(-90deg);

  /* Opera */
  -o-transform: rotate(-90deg);

  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

The rotation property of Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.

Check out the following CodePen to see this in action!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share