June 10, 2016

3D Flip Animation: 180° Card Flip Hover Effect. (HTML5 and CSS3)

website animations

flip animation

3D Card Flip Animation (HTML5 and CSS3)

The flip animation will run much smoother on your computer than in the demo video because the screen recorder made it look a little choppy. This animation can be used for many things like recipe/ingredients, test questions/answers, logo/link, card games, and whatever else you could come up with. I made a game for my son to help him study for tests. The size, color, corner radius and flip speed can be easily changed. I did have some mixed results with the animation in Internet Explorer depending on which one of my computers I ran the code, but it ran perfect in Chrome. Below is the source code. It’s built using only HTML5 and CSS3. The video is just for demonstration purposes. 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);
}

Clear Coded Programming

Please Leave a comment