Hover 3D យ៉ាងល្អប្រើ CSS 3

បង្កើត  HTML như sau:

	<div id="grid" class="main">
	    <div class="view">
	        <div class="view-back">
	            <span data-icon="A">566</span>
	            <span data-icon="B">124</span>
	            <a href="http://www.flickr.com/photos/ag2r/5439506585/in/photostream">→</a>
	        </div>

	        <img src="images/1.jpg" />

	    </div>

	    <div class="view">
	    <!-- ... -->
	    </div>
	    <!-- ... -->
	</div>

បង្កើតជាទម្រង់ jQuery ដូចខាងក្រោម:

	<div>
	    <div>
	        <!-- ... -->
	    </div>
	    <div style="background-image: url(images/1.jpg); ">
	        <span></span>  
	        <div style="background-image: url(images/1.jpg); ">
	            <span></span>
	            <div style="background-image: url(images/1.jpg); ">
	                <span></span>
	                <div style="background-image: url(images/1.jpg); ">
	                    <span></span>
	                    <div style="background-image: url(images/1.jpg); ">
	                        <span></span>
	                    </div><!-- /s5 -->
	                </div><!-- /s4 -->   
	            </div><!-- /s3 -->     
	        </div><!-- /s2 -->    
	    </div><!-- /s1 -->
	</div><!-- /view -->

សរសេរជាទម្រង់ JaveScript :

	$.fn.hoverfold = function( args ) {
	    this.each( function() {
	        $( this ).children( '.view' ).each( function() {
	            var $item   = $( this ),
	                img     = $item.children( 'img' ).attr( 'src' ),
	                struct  = '<div>';
	                    struct  +='<div>';
	                        struct  +='<div>';
	                            struct  +='<div>';
	                                struct  +='<div>';
	                                struct  +='</div>';
	                            struct  +='</div>';
	                        struct  +='</div>';
	                    struct  +='</div>';
	                struct  +='</div>';
	            var $struct = $( struct );
	            $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span ></span>' ) );
	        } );

	    });
	};

ប្រើកូដ CSS:

	.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;

	    perspective: 500px;

	}

កាត់រូប :

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

	.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;
	}

	.view .s2,
	.view .s3,
	.view .s4,
	.view .s5 {
	    transform: translateX(60px);
	}

	.view .s1 {
	    background-position: 0px 0px;
	}

	.view .s2 {
            background-position: -60px 0px;
	}

	.view .s3 {
	    background-position: -120px 0px;
	}

	.view .s4 {
	    background-position: -180px 0px;
	}

	.view .s5 {
	    background-position: -240px 0px;
	}

	.view .overlay {
	    width: 60px;
	    height: 100%;
	    opacity: 0;
	    position: absolute;
	    transition: opacity 150ms ease-in-out;
	}

	.view:hover .overlay {
	    opacity: 1;
	}

	.view img {
	    position: absolute;
	    z-index: 0;
            transition: left 0.3s ease-in-out;
	}

	.view {
	    overflow: hidden;
	}

	.view:hover img {
	    left: -85px;
	}

	.view div.view-back {
	    background: #666;
	}

Demo | Download