Amazing Photo Flip Effect Using Pure CSS3

From last 2 days i have been working on CSS3 concepts. Finally I got the interesting one. In this post i will explain how to create Amazing Photo Flip Effect using Pure CSS3. It is very helpful to create something like online visiting card. Just go ahead i will try to explain more… Don’t forget to watch demo.
Amazing Photo Flip Effect Using Pure CSS3


demo
download

HTML

<div class="flip-container"> 
<div class="flip"> 
<div class="front"> 
<p>Front<p> 
</div> 
<div class="back"> 
<p>Back</p> 
</div> 
</div> 
</div> 

In this code front div will be displayed. When hover on the div back will be displayed with flip effect.
CSS

.flip-container, .front, .back { 
width: 300px; 
height: 400px; 
} 
.flip-container{ 
perspective: 1000; 
margin: 0 auto; 
} 
.flip-container:hover .flip{ 
transform: rotateY(180deg); 
} 
.flip { 
transition: 0.6s; 
transform-style: preserve-3d; 
position: relative; 
} 
.front, .back { 
backface-visibility: hidden; 
position: absolute; 
top: 0; 
left: 0; 
} 
.front{ 
background: #333; 
color: #ddd; 
z-index: 2; 
} 
.back{ 
background: #ddd; 
color: #333; 
transform: rotateY(180deg); 
} 
.front p, .back p{ 
text-align: center; 
line-height: 300px; 
font-weight: bolder; 
font-family: Helvetica,Arial,Georgia,Times New Roman; 
text-align: center; 
font-size: 400%; 
text-transform: uppercase; 
} 

In this code observe the _.back_class by default we making it to transform 180 degrees. When we hover on .flip-container div we transforming the _.flip_div to 180deg so that the .back will be origianl place.
Read:Exactly Facebook Like URL Parsing Using PHP & Jquery
Cross Browser compatible code

.flip-container:hover .flip{ 
-webkit-transform: rotateY(180deg); 
-moz-transform: rotateY(180deg); 
-o-transform: rotateY(180deg); 
transform: rotateY(180deg); 
} 
.flip-container{ 
-webkit-perspective: 1000; 
-moz-perspective: 1000; 
-o-perspective: 1000; 
perspective: 1000; 
margin: 0 auto; 
} 
.flip-container, .front, .back { 
width: 300px; 
height: 400px; 
} 
.flip { 
-webkit-transition: 0.6s; 
-webkit-transform-style: preserve-3d; 
-moz-transition: 0.6s; 
-moz-transform-style: preserve-3d; 
-o-transition: 0.6s; 
-o-transform-style: preserve-3d; 
transition: 0.6s; 
transform-style: preserve-3d; 
position: relative; 
} 
.front, .back { 
-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
-o-backface-visibility: hidden; 
backface-visibility: hidden; 
position: absolute; 
top: 0; 
left: 0; 
} 
.front{ 
background: #333; 
color: #ddd; 
z-index: 2; 
} 
.back{ 
background: #ddd; 
color: #333; 
-webkit-transform: rotateY(180deg); 
-moz-transform: rotateY(180deg); 
-o-transform: rotateY(180deg); 
transform: rotateY(180deg); 
} 
.front p, .back p{ 
text-align: center; 
line-height: 300px; 
font-weight: bolder; 
font-family: Helvetica,Arial,Georgia,Times New Roman; 
text-align: center; 
font-size: 400%; 
text-transform: uppercase; 
} 

This will make our code work in all major browser except IE.
Reference
davidwalsh.name
w3schools
Finally Happy Diwali!. Be safe with crackers. Please share this the post.