Amazing Photo Flip Effect Using Pure CSS3

Published on November 12, 2012

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.

HTML

<div class="flip-container">
  <div class="flip">
    <div class="front">
      <p>Front</p>
      <p></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 .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.