Xem demo: https://dl.dropbox.com/u/8612983/Thu thuat WEB/3DHoverEffects/index.html Mã HTML PHP: <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="http://windowsz.net/images/1.jpg" /> </div> <div class="view"> <!-- ... --> </div> <!-- ... --> </div> Mỗi thumbnail sẽ đc đặt vào phần chi tiết. Cấu trúc chúng ta cần để tạo đc như vậy với class view sử dụng JavaScript như sau PHP: <div class="view"> <div class="view-back"> <!-- ... --> </div> <div class="slice s1" style="background-image: url(images/1.jpg); "> <span class="overlay"></span> <div class="slice s2" style="background-image: url(images/1.jpg); "> <span class="overlay"></span> <div class="slice s3" style="background-image: url(images/1.jpg); "> <span class="overlay"></span> <div class="slice s4" style="background-image: url(images/1.jpg); "> <span class="overlay"></span> <div class="slice s5" style="background-image: url(images/1.jpg); "> <span class="overlay"></span> </div><!-- /s5 --> </div><!-- /s4 --> </div><!-- /s3 --> </div><!-- /s2 --> </div><!-- /s1 --> </div><!-- /view --> Mỗi slide sẽ có ảnh nền của nó khi chúng chồng lên nhau, điều này giúp ta điều khiển dễ hơn. Đồng thời thêm 1 thẻ Span nằm lên trên để tạo ra hiệu ứng chân thật hơn. Đoạn JavaScript của chúng ta như sau PHP: $.fn.hoverfold = function( args ) { this.each( function() { $( this ).children( '.view' ).each( function() { var $item = $( this ), img = $item.children( 'img' ).attr( 'src' ), struct = '<div class="slice s1">'; struct +='<div class="slice s2">'; struct +='<div class="slice s3">'; struct +='<div class="slice s4">'; struct +='<div class="slice s5">'; 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 class="overlay" ></span>' ) ); } ); }); }; CSS Cho class View PHP: .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;} Hiệu ứng 3D cho các Slide PHP: .view .slice{ width: 60px; height: 100%; z-index: 100; transform-style: preserve-3d; transform-origin: left center; transition: transform 150ms ease-in-out; } Phần mô tả sẽ được xuất hiện khi rê chuột tới PHP: .view div.view-back{ width: 50%; height: 100%; position: absolute; right: 0; background: #666; z-index: 0;} Dành cho the Span PHP: .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;} Phần icon xuất hiện phía trước thẻ span chúng ta sẽ sử dụng font dạng icon tại Fontello. Chúngta sẽ add 1 data-icon vào thẻ span và sử dụng pseudo-class :before để hiển thị nó PHP: .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;} Tất cả sẽ di chuyển sang phải ngoại trừ Slide đầu tiên (do chúng ta có 2 lớp chồng lên nhau) PHP: .view .s2,.view .s3,.view .s4,.view .s5 { transform: translateX(60px);} Thiết lập các vị trí nền tương ứng của mỗi slice cho hình nền: PHP: .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;} Các lớp phủ ban đầu sẽ có một độ opacity là 0 và chúng ta sẽ thêm một quá trình chuyển đổi và thay đổi mức độ opacity khi rê chuột lại: PHP: .view .overlay { width: 60px; height: 100%; opacity: 0; position: absolute; transition: opacity 150ms ease-in-out;} .view:hover .overlay { opacity: 1;} Hãy cố định các vị trí và z-index cho hình ảnh (chỉ để chúng ta không nhìn thấy phần dưới ở bên trên và phần dự phòng). Và chúng ta cũng sẽ thêm một quá trình chuyển đổi cho các trình duyệt không hỗ trợ 3D (điển hình là IE): PHP: .view img { position: absolute; z-index: 0; transition: left 0.3s ease-in-out;} Khi phát hiện ra trình duyệt ko hỗ trợ 3D chúng ta sẽ gọi file CSS fallback.css lên để giải quyết vấn đề PHP: .view { overflow: hidden;} .view:hover img { left: -85px;} .view div.view-back { background: #666;} Nó sẽ giúp tấm ảnh của bạn trượt qua trái khi rê chuột vào. Với phần Ví dụ Chúng ta tạo ra 1 hiệu ứng "gấp ảnh". Để làm điều này chúng ta sẽ thay đổi giá trị của "viễn cảnh" các phần khi xem. Và di chuyển chúng trên các phần đó. PHP: .view { perspective: 1050px;} .view div { transition: all 0.3s ease-in-out;} Các slide 2, 3 ,4 5 sẽ chuyển động dạng 3D và chúng ta sẽ có được hiue65 ứng Gập ảnh PHP: .view:hover .s2{ transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);}.view:hover .s3,.view:hover .s5{ transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);}.view:hover .s4{ transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);} Mỗi slide sẽ di chuyển sang trái, và nên đặt cho nó giá trị là 59px để độ gập đc tốt hơn. Slide thứ 2 sẽ xoay 1 góc -45 độ để trong như nó chuyển về bên trái. Slide thứ 4 sẽ xoay theo hướng khác, Slide 3 và 5 cùng xoay 90 độ. Hãy nhớ rằng chúng ta có các lốp chồng lên nhau, do vậy nếu lớp cha thay đổi thì các lớp con cũng sẽ xoay theo. Để nhìn nó thực tế hơn ta thêm các gadient vào lớp phủ trên cùng. PHP: .view .s2 > .overlay { background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);} .view .s3 > .overlay { background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);} .view .s4 > .overlay { background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);} .view .s5 > .overlay { background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);} Phần mô ta cũng sẽ có một màu nền, va ta sẽ có nó 1 chút shadow PHP: .view div.view-back{ background: linear-gradient(left, #0a0a0a 0%,#666666 100%);} Download file đính kèm để xem chi tiết Nguồn: Ghi lại từ: http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/
Chủ thớt cho hỏi có cách nào để nó tự chỉnh ảnh đúng vào khung không? Mình cho ảnh to là nó cũng để thế luôn không tự động chỉnh cho size khớp với cái khung :(
Link demo bt mà nhỉ. Bạn thử dùng css làm cái tag img mặc định chuyển về kích thước của bạn xem. Mình ko giỏi về CSS, chỉ sưu tầm cho mọi người thôi ^^!
IE nó ko theo chuẩn gì cả không biết các bản sau có khác hơn không .Webkit (Chrome,Safari,..) và Gecko (FireFOx) vẫn hỗ trợ nhiều tính năng mới nhất.
Bạn click vào đâu, ở demo hay ở của bạn, bạn dùng gì để click IE, FF Chrome ??. Ở đây chỉ dùng cho FF, Chrome hỗ trợ chưa tốt. IE thì nó ngu cái CSS3 lắm ko hỉu đâu
