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 .backclass by default we making it to transform 180 degrees. When we hover on .flip-container div we transforming the .flipdiv 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.

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.