CSS Image Flip Animation | Lessoncup Programming Blog

Friday, 1 November 2013

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

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons