3D Flip Animation: Pure HTML5 And CSS3 Source Code & Demo Video

animation

HTML5 and CSS3 3D Card Flip Animation

Source code for making a 3D flip animation using only HTML5 and CSS3. The video is just for demonstration purposes. Source code below. I am using an external style sheet, so you should have one .html document named “flipcardindex.html” and one .css document named “flipcardcss.css“. If you want to change the document names, make sure you change the link name to the stylesheet in the flipcardindex.html source code as well.

Source Code for flipcardindex.html

<!DOCTYPE html>
<html>
<head>
<title>3D Flip Animation</title>
<link rel="stylesheet" type="text/css" href="flipcardcss.css">
</head>
<body><h1>3D Flip Animation</h1><div class="flipAnimation">
<div class="front"><p class="contentFront">Hydrogen</p></div>
<div class="back"><p class="contentBack">1 <br />H <br />1.008 <br />Nonmetal</p></div>
</div><div class="flipAnimation">
<div class="front"><p class="contentFront">Helium</p></div>
<div class="back"><p class="contentBack">2 <br />He <br />4.003 <br />Noble Gas</p></div>
</div><div class="flipAnimation">
<div class="front"><p class="contentFront">Lithium</p></div>
<div class="back"><p class="contentBack">3 <br />Li <br />6.94 <br />Alkali Metal</p></div>
</div>

<div class="flipAnimation">
<div class="front"><p class="contentFront">Beryllium</p></div>
<div class="back"><p class="contentBack">4 <br />Be <br />9.012 <br />Alkaline Earth Metal</p></div>
</div>

</body>
</html>

Source Code for flipcardcss.css

body{
background-color: blue;
font-family: Times;
text-align: center;
padding: 20px;
font-weight: bold;
}
.contentFront{
font-size: 30px;
}
.contentBack{
font-size: 25px;
}
.flipAnimation{
width: 250px;
height: 200px;
margin: 20px;
float: left;
}
.flipAnimation > .front{
position: absolute;
transform: perspective(600px) rotateY(0deg);
-webkit-transform: perspective(600px) rotateY(0deg);
-ms-transform: perspective(600px) rotateY(0deg);
-o-transform: perspective(600px) rotateY(0deg);
background: white;
width: 250px;
height: 200px;
border-radius: 20px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: -webkit-transform .75s linear 0s;
transition: -ms-transform .75s linear 0s;
transition: -o-transform .75s linear 0s;
transition: transform .75s linear 0s;
}
.flipAnimation > .back{
position: absolute;
transform: perspective(600px) rotateY(180deg);
-webkit-transform: perspective(600px) rotateY(180deg);
-ms-transform: perspective(600px) rotateY(180deg);
-o-transform: perspective(600px) rotateY(180deg);
background: gray;
width: 250px;
height: 200px;
border-radius: 20px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: -webkit-transform .75s linear 0s;
transition: -ms-transform .75s linear 0s;
transition: -o-transform .75s linear 0s;
transition: transform .75s linear 0s;
}
.flipAnimation:hover > .front{
transform: perspective(600px) rotateY(-180deg);
-webkit-transform: perspective(600px) rotateY(-180deg);
-ms-transform: perspective(600px) rotateY(-180deg);
-o-transform: perspective(600px) rotateY(-180deg);
}
.flipAnimation:hover > .back{
transform: perspective(600px) rotateY(0deg);
-webkit-transform: perspective(600px) rotateY(0deg);
-ms-transform: perspective(600px) rotateY(0deg);
-o-transform: perspective(600px) rotateY(0deg);
}

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: