Techumber

Amazing Photo Flip Effect Using Pure CSS3

Github avatar
Dimpu
November 12, 2012. 2 min read

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-containerundefined .frontundefined .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;
}
.frontundefined .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 pundefined .back p{
text-align: center;
line-height: 300px;
font-weight: bolder;
font-family: HelveticaundefinedArialundefinedGeorgiaundefinedTimes 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-containerundefined .frontundefined .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;
}
.frontundefined .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 pundefined .back p{
text-align: center;
line-height: 300px;
font-weight: bolder;
font-family: HelveticaundefinedArialundefinedGeorgiaundefinedTimes 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.


...