With the introduction of CSS3, one little thing that you could do very well with just a few lines of code was animations. As you might have observed, there are various animations on new websites that have been created with the latest technologies of HTML5 and CSS3. Most of these animations are used to bring real life simulations.
Today, we will display how a flip card can be made using the flipping feature of CSS3. It will have 2 sides - one with a logo or an image and another side having the company details. By default, it will show the image or logo, whereas on mouse hover, it will flip to the other side with the details. The two sides of our simple example will look like the following.
##Basic markup Starting with basic HTML layout, we create some elements on our page.
<!DOCTYPE html>
<html>
<head>
<title>flicard</title>
<style type="text/css">
</style>
</head>
<body>
<div class="scene3D">
<div class="flip">
<div>
<p>
The Blog Bowl
</p>
</div>
<div>
<img src="https://s3.amazonaws.com/photos.angel.co/startups/i/307822-fc18fa088777d8dad0f34b7aa0cee49a-thumb_jpg.jpg"/>
</div>
</div>
</div>
</body>
</html>
The complete element resides in scene3D div element. Inside this element, there is another div with id flip. This is the prime element which flips over and shows either of the sides. The 2 sides of the card are shown by 2 distinct elements which are the in the 2 subsequent divs inside flip div.
##Adding the CSS
We start by fixing the scene3D element. As we saw earlier, this is the container element. The properties that we attach to the container of the flipcard are as follows.
.scene3D {
display: block;
float: left;
margin: 10px;
/*border-radius*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.scene3D:hover .flip {
/*transform*/
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
This essentially defines the styles for the 2 states. The main side and the flipped side (on mouse hover). The main style is pretty basic. On mouse hover, the flip div rotates with respect to X axis by 180 and that is what we have specified using rotateX(180deg). This means that the the card is already flipped. Hence, we see the image first instead of the text. The transform does animation part- which means that the transition is smooth. The time of animation will be specified later on using transition.
Next, we fix the image size and define styles for flip div.
.flip {
width: 100px;
height: 100px;
/*border-radius*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/*box-shadow*/
-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.3);
box-shadow: 0 0 15px rgba(0,0,0,0.3);
/*transform*/
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
/*transition*/
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
/*transform-style*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
img {
height: 100px;
width: 100px;
/*border-radius*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
###Some important takeaways
The image size is fixed to 100px X 100px with 5px border radius. You could change it to suit your needs. Next, focusing on important aspects of the flip div, two important things can be pointed out.
- The first is that it is flipped to
0degandtransitionis performed in a time frame of 1 second. transform-stylespecifies the use ofpreserve-3d. Without this property, even after flipping, we won't be able to see the other part of the card. I would encourage to try the animation out without this property. This can act as a simple animation to the parts of UI where you want to draw attention by continuously flipping an element.
Moving on, we specify more styles of the elements inside flip div.
.flip div {
position: absolute;
width: 100px;
height: 100px;
/*border-radius*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/*backface-visibility*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip div:first-child {
/*border-radius*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #333;
/*transform*/
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.flip div:first-child p {
color: #FFF;
text-shadow: 0 0 1px .111;
padding-top: 50px;
text-align: center;
}
Explaining the important terms once again, we notice the need to focus on two particular properties.
backface-visibility: This ensures that the backside of the card remains invisible. Try to omit it and you will see a lot of inverted and upside down frames.flip div:first-child: This class/element defines the properties of the firstdivchild under flip. Since we rotated thescene3Donce, we again rotate this element by180deg.
That is it. Our flipping card is ready. This card can be useful to show profiles of the people behind their pictures, or names of authors of the book behind its cover, team members with their roles behind their photo or even product specification behind its image. The sky is the limit. The possibilities are infinite.
The complete code lies on GitHub. You can find a demo on GitHub pages.
The example has been inspired from CSSDeck.