jquery-flip

轉
Reference link:
http://nnattawat.github.io/flip/

利用jquery可以達到flip的效果
1. 下載套件
網站最上方下載
或是在Github
https://github.com/nnattawat/flip

2. 在html 載入需要的連結和檔案

 <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
 <script src="dist/jquery.flip.js"></script>

(第一行為jquery，第二行為flip套件)
(第二個套件要注意檔案位置)

3. 對於需要翻轉的block，需設成下列形式:

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

即需要翻轉的block內容必須包含兩個<div>，一個class為front，一個class為back


4. 設置flip()

    <script type="text/javascript">
    $(function(){
      $("#card-2").flip({
        axis: "y",
        reverse: true,
        trigger: "click"
      });
    });
    </script>

5. 其他Option:

Attribute	Possible value	Default	Description
axis	y, x	y	The axis that you want to rotate around
trigger	click, hover, manual	click	Event that activates the flip action. Using manual means that you have to activate it via javascript.
reverse	true, false	false	Set to true if you want to reverse the direction of the flip.
speed	any integer	500	Duration in milisecond for flipping dom

若將trigger設為manual，則需要在javascript呼叫flip()，如:

$("#card-2").flip(true);  //back side

和

$("#card-2").flip(false);  //front side

6. demo
http://m100.nthu.edu.tw/~s100062209/hw3.html