CSS Image Flip Animation

Today we are going to learn about how to flipping the images using CSS transforms, the beauty of css3 is using animation and transforms properties we can create awesome animations.

HTML

the html structure shows you, the two layers front-position and back-position, when we over the first position the back position will display, use -webkit-transform-style: preserve-3d; to first-position, on mouse over use this property  -webkit-transform: rotateY(180deg); to rotate the layout. create one class and use this property -webkit-backface-visibility: hidden; to hide the layouts in perspective mode and set the position to absolute, and assign to both front and back layers.

<ul>
    <li>
      <div class="image_front">
        
    <div class="hidden_objects">
          <img src="flower-desktop-wallpaper-640x400.jpg" style="width:300px; height:250px"> 

          </div>
            
     <div class="hidden_objects image_back">
     Lesson Cup Programming Blog
     </div>
          
    </div>
    </li>
        
        
    <li>
      <div class="image_front">
        
    <div class="hidden_objects">
       <img src="happy-girl-in-spring.jpg" style="width:300px; height:250px"> </div>
            
     <div class="hidden_objects image_back">
    Lesson Cup Programming Blog
     </div>
          
    </div>
    </li>
    
    <li>
      <div class="image_front">
        
    <div class="hidden_objects">
       <img src="HD-Wallpapers-For-Background-8.jpg" style="width:300px; height:250px"> </div>
            
     <div class="hidden_objects image_back">
     Lesson Cup Programming Blog
     </div>
          
    </div>
    </li>
    
    <li>
      <div class="image_front">
        
    <div class="hidden_objects">
       <img src="Maltese-Puppy-Wallpaper-640x400.jpg" style="width:300px; height:250px"> 
          </div>
            
     <div class="hidden_objects image_back">
     Lesson Cup Programming Blog
     </div>
          
    </div>
    </li>
    
    
    </ul>

CSS

the css content flip the layout horizontally, make sure the front and back layouts are should be set positioned absolutely, they can overlay each other in same position without any issue. and we set back element to -webkit-backface-visibility: hidden; during the animation the flipped element not display.

body{ font-family:Verdana, Geneva, sans-serif; color:#FFF; font-size:11px; background-color:#000;}

#lessoncup{ width:800px; height:600px; border:solid #CCC 0; padding:5px; margin:0 auto;}

h1{ width:350px; margin:0 auto; padding:10px;}


ul{ list-style:none; margin:0; padding:0;}

li{float:left; width:300px; height:290px; margin:0 50px;}


.image_front {cursor:pointer;
 width: 300px; height:250px;
 -webkit-transform-style: preserve-3d;
 -webkit-transition: 0.5s;
 border:solid #CCC 5px;
}

.image_front:hover{
  -webkit-transform: rotateY(180deg);    
 }

.hidden_objects {
 position: absolute;
 backface-visibility:hidden;
 -webkit-backface-visibility: hidden;
}


.image_back {
  width: 290px; height:240px; padding:5px;
  -webkit-transform: rotateY(180deg);
  background: #a3a3a3 url(texture.png); 
 }

</style>

Live Demo   Download Script