3D Hover Effects

Now we are going to show you all new 3D hover effects using css. Its too impressive and this amazing hover effects are inspired from Google SketchUp Showcase.In this tutorial we had explained the hover effects of css on images. When you take mouse pointer on them they get bended or change their shape.
For example: As in facebook you can see likes of each photo by using transformation css you can see their like when hover effect is applying on the image.Sounds tricky, just download and watch the effects. You can use this effect on your website.
This tutorial includes magic of css, jquery and little html code.

Download Code

Jquery:

( function( $ ) {
 
 $.fn.hoverfold = function( args ) {

  this.each( function() {
  
   $( this ).children( '.view' ).each( function() {
   
    var $item  = $( this ),
     img  = $item.children( 'img' ).attr( 'src' ),
     struct = '

';
      struct +='


';
       struct +='


';
        struct +='


';
         struct +='


';
         struct +='
';
        struct +='
';
       struct +='
';
      struct +='
';
     struct +='
';
     
    var $struct = $( struct );
    
    $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '' ) );
    
   } );
   
  });

 };

} )( jQuery );

Image:

Css Magic:

This is the css about the view of  image.

.view {
 width: 316px;
 height: 216px;
 margin: 10px;
 float: left;
 position: relative;
 border: 8px solid #fff;
 box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
 background: #333;
 -webkit-perspective: 500px;
 -moz-perspective: 500px;
 -o-perspective: 500px;
 -ms-perspective: 500px;
 perspective: 500px;
}

After that the main css is given below about slice view of image which is the best part.

.view .slice{
 width: 60px;
 height: 100%;
 z-index: 100;
 
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;
 
 -webkit-transform-origin: left center;
 -moz-transform-origin: left center;
 -o-transform-origin: left center;
 -ms-transform-origin: left center;
 transform-origin: left center;
 
 -webkit-transition: -webkit-transform 150ms ease-in-out;
 -moz-transition: -moz-transform 150ms ease-in-out;
 -o-transition: -o-transform 150ms ease-in-out;
 -ms-transition: -ms-transform 150ms ease-in-out;
 transition: transform 150ms ease-in-out;
  
}

Css of back view of image and their links:

.view div.view-back{
 width: 50%;
 height: 100%;
 position: absolute;
 right: 0;
 background: #666;
 z-index: 0;
}

.view-back span {
 display: block;
 float: right;
 padding: 5px 20px 5px;
 width: 100%;
 text-align: right;
 font-size: 16px;
 color: rgba(255,255,255,0.6);
}

.view-back span:first-child {
 padding-top: 20px;
}

.view-back a {
 display: bock;
 font-size: 18px;
 color: rgba(255,255,255,0.4);
 position: absolute;
 right: 15px;
 bottom: 15px;
 border: 2px solid rgba(255,255,255,0.3);
 border-radius: 50%;
 width: 30px;
 height: 30px;
 line-height: 22px;
 text-align: center;
 font-weight: 700;
}

.view-back a:hover {
 color: #fff;
 border-color: #fff;
}

.view-back span[data-icon]:before {
    content: attr(data-icon);
    font-family: 'icons';
    color: #aaa;
 color: rgba(255,255,255,0.2);
 text-shadow: 0 0 1px rgba(255,255,255,0.2);
 padding-right: 5px;
}

Hope you enjoyed this.

source codrops