Hướng dẫn Tạo hiệu ứng Flip 3D với CSS3

Xem: 1719    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

0 điểm   ( 4 đánh giá ) File đã được kiểm thử

Để có thể hiểu và sử dụng thành thạo CSS3 không phải là có thể trong ngày một ngày hai, ngoài việc chịu khó tìm hiểu những thuộc tính mà nó mang lại, chúng ta cần phải làm đi làm lại thật nhiều các ví dụ về các hiệu ứng mà CSS3 hỗ trợ cho chúng ta.

Nhằm mang lại cho các bạn có thêm nhiều ví dụ để nâng cao khả năng của mình. Hôm nay mình xin chia sẻ cho các bạn đoạn css giúp chúng ta tạo hiệu ứng Flip 3D. Qua bài viết này, các bạn có thể áp dụng cho những hiệu ứng hình ảnh có trên các website hay blog của mình.

Bước 1 : HTML

Giả sử chúng ta có đoạn html cần tạo hiệu ứng 3D như sau :

<div class="flip3D">
     <div class="back">Box 1 - Back</div>
     <div class="front">Box 1 - Front</div>
</div>
<div class="flip3D">
     <div class="back">Box 2 - Back</div>
     <div class="front">Box 2 - Front</div>
</div>
 
<div class="flip3D">
    <div class="back">Box 3 - Back</div>
    <div class="front">Box 3 - Front</div>
</div>

Bước 2 : Tạo hiệu ứng 3D bằng CSS3

Chúng ta sẽ tận dụng thuộc tính transform và transition trong CSS3 để tạo  hiệu ứng Flip 3D , các bạn chỉ cần copy đoạn css sau .

.flip3D{ width:240px; height:200px; margin:10px; float:left; }
.flip3D > .front{
    position:absolute;
    -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
    background:#FC0; width:240px; height:200px;
    border-radius: 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s;
}
 
.flip3D > .back{
    position:absolute;
    -webkit-transform: perspective( 600px ) rotateY( 180deg );
    transform: perspective( 600px ) rotateY( 180deg );
    background: #80BFFF;
    width:240px;
    height:200px;
    border-radius: 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s linear 0s;
    transition: transform .5s linear 0s;
}
 
.flip3D:hover > .front{
    -webkit-transform: perspective( 600px ) rotateY( -180deg );
    transform: perspective( 600px ) rotateY( -180deg );
}
 
.flip3D:hover > .back{
    -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
}

Xem xong code chắc hẳn các bạn sẽ thấy là rất đơn giản phải không nào. Thực ra chỉ cần hiểu một số thuộc tính này, các bạn có thể tha hồ sáng tạo nhiều hiệu ứng đẹp mắt cho riêng mình. Nếu bạn nào có những hiệu ứng nào đẹp mắt và linh hoạt hơn, thì đừng ngần ngại chia sẻ cho mình và các bạn khác nhé.

Chúc các bạn thành công !

Hướng dẫn Tạo hiệu ứng Flip 3D với CSS3

Hướng dẫn Tạo hiệu ứng Flip 3D với CSS3 Đăng ngày 13-08-2014  Để có thể hiểu và sử dụng thành thạo CSS3 không phải là có thể trong ngày một ngày hai, ngoài việc chịu khó tìm hiểu những thuộc tính mà nó mang lại, chúng ta cần phải làm đi làm lại thật nhiều các ví dụ về các hiệu ứng mà CSS3 hỗ trợ cho chúng ta. 5/10 1719

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+84) 246. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn
File gợi ý cho bạn
File tải nhiều nhất
Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;