Hi all today we will see how to create simple and attractive flipping div using simple CSS and html code. The flipping div effect is done by using CSS transform property, CSS transform property is used to achieve the 2d and 3d transformation for the div. This type of flipping effect is really useful when you develop the website.
You can present the any services and products using this type of flipping div. This flipping animation is really attractive and highlight your web content in better way. Here I provided the simple example of animated flipping div. You can see the below simple CSS code to create this , Here also i provided the live demo, you can see by clicking the demo link and also you can download the example flipping animation code by clicking the download button.
Code for simple & Attractive Flip Effect using css:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Simple Flip Effect using css</title>
<style>
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
perspective: 1000px;
float: left;
margin-right: 50px;
margin-left:50px;
margin-top: 80px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.css-flip-front, .css-flip-back, .css-flip-front-blue, .css-flip-back-blue, .css-flip-front-green, .css-flip-back-green {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
.css-flip-front {
background-color: #fc653700;
color: #fc6537;
border: 5px dashed;
border-color: #fc6537;
}
.css-flip-back {
background-color: #fc6537;
color: white;
transform: rotateY(180deg);
}
.css-flip-front-blue {
background-color: #fc653700;
color: #2a79bf;
border: 5px dashed;
border-color: #2a79bf;
}
.css-flip-back-blue {
background-color: #2a79bf;
color: white;
transform: rotateY(180deg);
}
.css-flip-front-green {
background-color: #fc653700;
color: #81d742;
border: 5px dashed;
border-color: #81d742;
}
.css-flip-back-green {
background-color: #81d742;
color: white;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="flip-card">
<div class="flip-card-inner">
<div class="css-flip-front">
<h1>Frontside Content</h1>
<p>SanWebCorner</p>
<p>www.sanwebcorner.com</p>
</div>
<div class="css-flip-back">
<h1>Backside Content</h1>
<p>SanWebCorner</p>
<p>www.sanwebcorner.com</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="css-flip-front-blue">
<h1>Frontside Content</h1>
<p>SanWebCorner</p>
<p>www.sanwebcorner.com</p>
</div>
<div class="css-flip-back-blue">
<h1>Backside Content</h1>
<p>SanWebCorner</p>
<p>www.sanwebcorner.com</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="css-flip-front-green">
<h1>Frontside Content</h1>
<p>SanWebCorner</p>
<p>www.sanwebcorner.com</p>
</div>
<div class="css-flip-back-green">
<h1>Backside Content</h1>
<p>SanWebCorner</p>
<p>www.sanwebcorner.com</p>
</div>
</div>
</div>
</body>
</html>
0 Comments