kawadhiya21/flipcard.md Secret

## flipcard.md

      
    Raw
  

              flipcard.md
            
          
    Flip Card using pure CSS3

As you might have observed various animations on new website. Most of the animations are used to bring real life simulations. Today we will display how a visiting card can be made using flipping feature of CSS3. It will have 2 sides one with a logo and other side having company details. On mouse hover, it will flip to the other side. [Demo]
Starting with basic HTML layout, we create some elements (explanation ahead)
<!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 show 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.
Initiation

We start by fixing the ``scene3D` element. Here goes its CSS.
.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 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. The time of animation will be specified later on using transition.
Fixing Image Size

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;
	}


The image size is fixed to 100px X 100px with 5px border radius. Next focusing on important aspects of flip div, 2 important things can be pointed out.

The first is that it is flipped to 0deg and transition is to be performed in 1 second.
Next is that its transform-style specifies that it uses preserve-3d. Without this property, even after flipping, we won't be able to see the other part of the card. (and I would encourage to try this out. This can act as a simple animation to the parts of UI where you want to draw attention by continuously flipping an element).

Fixing It To Perfection

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;
	}


Starting with important terms once again.

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 very first child. Since we rotated the scene3D once, we again rotate this element by 180deg.

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 possibilities are infinite.
The complete code lies here.
Example inspired from : CSSDeck