How To Create A Flip Box Using HTML & CSS?

62 Views

This is a very simple trick. In this article I am going to show you how to create a flip box using html & css.

Let’s begin. 

Apply HMTL Code

create the html structure now and save it as html file.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

Later, I will create 3 div inside 1 main div at first. Let’s check all of these.

	<div class="fbox"> <!-- first div -->

		<div class="inner-fbox"> <!-- second div -->

			<div class="front-fbox"> <!-- third div -->
				<img src="images/Screenshot_4.png" width="300px" height="350px">
			</div>

			<div class="back-box"> <!-- last div -->
      			<h2>Anup Deb Nath Rinku</h2>
      			<hr>
      			<h3>
      				Blogger | Content Writer | Web Designer
      			</h3>
      			<hr>
      			<h3>
      				<center>
      					Contact With Me
      				</center>
      			</h3>
      			<hr>
      			<h4>
      				Email :: anupdebnaththeman@gmail.com<hr> 
      				Phone:: *********
      			</h4>
    		</div>
    		
		</div>
	</div>

We are all done. Time to apply css code now.

Apply CSS Code

First step ::: Code For First div.

.fbox{
	background-color: transparent;
  	width: 300px;
  	height: 200px;
  	perspective: 1000px;
  	left: 30%;
  	top: 15%;
  	position: absolute;
}

Second step :: Code For Second div.

.inner-fbox{
	position: relative;
        width: 300px;
	height: 200px;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

.fbox:hover .inner-fbox {
  	transform: rotateY(180deg);
}

Third Step :: Code For Front and Back box.

.front-fbox, .back-box {
	position: absolute;
        width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

Fourth Step :: Code For Back box.

               .front-fbox {
		  background-color: #bbb;
		  color: black;
		}

		.back-box {
		  background-color: #ddd;
		  color: black;
		  width: 300px;
		  height: 350px;
		  border-radius: 10%;
		  transform: rotateY(180deg);
		}

Now run all the code through your browser and see how it works.

Anup Deb Nath Rinku

I am a zero starter. Nothing to say right now, just wait and see. i will come like a thunder.

View all posts by Anup Deb Nath Rinku →

Share Your Opinion With Me

%d bloggers like this: