How to Create a 3D FlipBox using HTML and CSS?

How to Create a 3D Flip-Box using HTML and CSS?

Hello Guys,

Today i am going to show you how to create a flip box or flip card on hover using HTML and CSS. You can use it on text behind photos, some image behind text and so on as per your creative mind. So lets get started with How to create a 3D Flip-Box using HTML and CSS.

Flip Box Preview:

https://glriihdzxu0ems6zqhc8tg-on.drv.tw/mthschools.tech/www.flipBox.com/

The boxes or card is non-another then your div element of HTML. Basically the idea is to create two div elements one for front and another one is for back.

So first we have taken two documents as always the first one is for our HTML code and the second one is for our CSS code.

Explain HTML Code:

in html first we have given title “MTH 3D FLIP BOX” to our document then we linked our external “style.css” document with the html document using link element. Both actions are done under head element.

Then we took some div elements to construct our webpage here. The first div element is container of whole widgets inside document. The second container with “head” class contained header part of the document.

The next div with id:“contextX” contains two div elements, which are our actual flip boxes the first div element with class “flipBox1” contains elements relates to flipBox 1 which showed in image and class “flipBox2” contains elements for flipBox2. Here two flipbox are present because of horizontally and vertically effects.

At last we taken two elements again under flipBox1 the first element is for our flip-Box front side and the second one is for backward. The same process is repeated to flipBox2.

So you can check the code below and if having any doubt to code, you can clear them by above explanation.

HTML Code

<!DOCTYPE html>

<html>

<head>

<title>MTH 3D FLIP BOX</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="contaier">

<div class="head" id="contentX">

<h1>MTH 3D FLIP CARD</h1>

</div>

<div class="subContainer" id="contentX">

<div class="flipBox1" id="flipBoxMain">

<div class="hFlipBox" id="flipBoxSubMain">

<div class="hFlipBoxFront" id="frontFlip">

<h2>Hover To Flip Horizontaly</h2>

</div>

<div class="hFlipBoxBack" id="backFlip">

<h2>The Back side</h2>

</div>

<div class="flipBox2" id="flipBoxMain">

<div class="vFlipBox" id="flipBoxSubMain">

<div class="vFlipBoxFront" id="frontFlip">

<h2>Hover To Flip Verticaly</h2>

</div>

<div class="vFlipBoxback" id="backFlip">

<h2>The Back Side</h2>

</div>

</body>

</html>

CSS Code

.contaier{

width: 100%;

height: 100vh;

}

#contentX{

display: flex;

align-items: center;

justify-content: center;

width: 100%;

}

.head{

flex-direction: column;

height: 20vh;

font-family: "Raleway";

font-size: 20px;

color: #343434;

}

.subContainer{

height: 70vh;

flex-direction: row;

}

#flipBoxMain{

width: 25%;

height: 100%;

margin-right: 10px;

margin-left: 10px;

}

#flipBoxSubMain{

position: relative;

width: 100%;

height: 100%;

text-align: center;

transition: transform 0.8s;

transform-style: preserve-3d;

}

.flipBox1:hover .hFlipBox{

transform: rotateX(180deg);

cursor: pointer;

}

.flipBox2:hover .vFlipBox{

transform: rotateY(180deg);

cursor: pointer;

}

#frontFlip, #backFlip{

position: absolute;

width: 100%;

height: 100%;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

}

#frontFlip{

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

font-family: "Ubuntu";

font-size: 25px;

color: #000000;

}

.hFlipBoxFront{

background-color: #eb4034;

}

.vFlipBoxFront{

background-color: #fcba03;

}

#backFlip{

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

font-family: "Ubuntu";

font-size: 25px;

color: #f6f6f6;

color: white;

}

.hFlipBoxBack{

background-color: #4287f5;

transform: rotateX(180deg);

}

.vFlipBoxback{

background-color: #32a852;

transform: rotateY(180deg);

}

so after applying the HTML code and CSS code you can save your file and run them you will get your result.

To check the live preview of the flip box click on below link:

https://glriihdzxu0ems6zqhc8tg-on.drv.tw/mthschools.tech/www.flipBox.com/

Hope this tutorial is helpful for you. Flipbox’s are very useful and fun attractive for users. You can add image, text or both to the card, which depends on your need.

So that's it for today we will get back to you soon with new and interesting tutorial.

How to create a image overlay effect using HTML and CSS?

How to create a Login Form using HTML and CSS?

Feel free to leave your valuable comments below.

Thank you

How to Create a 3D FlipBox using HTML and CSS?