Hướng dẫn cài đặt
1. Các bạn có thể sử dụng CDN
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js">
2. Hoặc có thể tải file js và tiến hành cài đặt

Click vào đây để thực hiện tải plugin

<script src="jquery-2.1.4.min.js">
<script src="jquery.flip.js">
Hướng dẫn sử dụng

Tạo 2 thẻ div class frontback ở trong một thẻ div

<div id="card"> 
  <div class="front"> 
    Front content
  </div> 
  <div class="back">
    Back content
  </div> 
</div>

Và sau đó gọi Jquery flip()

$("#card").flip()
Dưới đây là một vài ví dụ flip
            $("#card").flip({
              axis: 'x',
              trigger: 'hover'
            });
        

            $("#card").flip({
              axis: 'x',
              trigger: 'hover',
              reverse: true
            });
        

                    $("#card").flip({ trigger: 'manual' });
                
$("#card").flip(true);
$("#card").flip(false);
$("#card").flip('toggle');

                    $("#card").flip({
                      axis: 'y',
                      trigger: 'click'
                    });
                
$("#card").flip({axis: 'x'});
$("#card").flip({axis: 'y'});
$("#card").flip({reverse: true});
$("#card").flip({reverse: false});

                    $("#card").flip({ trigger: 'click' });
                
                    $("#card").on('flip:done',function(){
                      $(this).doCoolFadingThings();
                      //Disclaimer: ^This function is fake :)
                    });
                

                $("#card").flip({trigger: 'click'});
                
                    var not = function (axis) { if (axis == 'x') { return 'y'; } else { return 'x'; } };
                    var c7_nextAxis = 'y';
                    $('#toggleaxis').click(function () { c7_nextAxis = not(c7_nextAxis); $('#card').flip({ axis: c7_nextAxis }); });
                
                    $('#assign-change').click(function () { $("#card").on('flip:change', function () { $(this).flip('toggle'); }); });
                

            $("#card-fluid").flip({ 
                axis: 'y', 
                trigger: 'click', 
                forceWidth: false, 
                forceHeight: false })
            .find('.front, .back')
            .css({ 'width': '100%', 'height': '100%' });
        
.flip()
Tham số Giá trị Ghi chú
[Options] Object(Xem bảng dưới)true, false, 'toggle' Nếu là object, thì các thuộc tính sẽ là các thiết lập cho flip. Còn không thì nó là các giá trị để thể hiện Các cách flip
[callback] function Là một function được gọi sau khi flip được thực hiện
Options
Thuộc tính Giá trị Mặc định Khả dụng Description
axis 'y', 'x' 'y' Luôn luôn Trục mà bạn muốn xoay quanh khi lật ảnh 
trigger 'click', 'hover', 'manual' 'click' Chỉ khi khởi tạo Sự kiện mà bạn muốn khi thực hiện flip. Sử dụng manual nghĩa là bạn muốn flip bằng cách gọi lệnh javascript. Khi được thiết lập là click và sự kiện tap có thể dùng (Ví dụ. jQuery Mobile hoặc jQuery Touch Events), flip sẽ được thực hiện thay cho click như một cú click chuột thông thường thay cho sự kiện tap.
reverse true, false false Luôn luôn Thiết lập là true nếu như bạn muons đảo ngược hướng flip
speed any integer 500 Chỉ khi khởi tạo Thời gian thực hiện hiệu ứng flip được tính bằng miliseconds. Càng cao thì hiệu ứng lật càng chậm
front [selector], jQuery object '.front' Chỉ khi khởi tọa Selector trỏ đến nội dung flip mặt trước
back [selector], jQuery object '.back' Chỉ khi khởi tạo Selector trỏ đến nội dung flip mặt sau
autoSize true, false true Chỉ khi khởi tạo

Nội dung mặt trước và mặt sau được tự động kích thước bằng nhau so với vùng chứa nó. Có nghĩa là flip sẽ thêm thẻ width:100%, height:100% vào 2 nội dung mặt frontback

forceWidth true, false false Chỉ khi khởi tạo Nếu là true thì nội dung front và back sẽ được thiết lập width:= width của cùng chứa nó
forceHeight true, false false Chỉ khi khởi tạo Nếu là true thì nội dung front và back sẽ được thiết lập height:= width của cùng chứa nó

Chúc các bạn sử dụng plugin flip hiệu quả

Sơn 20 sưu tầm