3D Thumbnail hover effects 圖片 3D 動畫摺疊效果

3D Thumbnail hover effects 滑鼠滑過圖片的所發生的 3D 動畫摺疊效果，建立一個結構將允許我們使用 jQuery 框架使圖片顯示為摺疊或者是彎曲，當使用者的滑鼠滑過時，使用 CSS3 和 jQuery 讓圖片產生 3D 的變化效果。這一個範例因為是使用 CSS3 ，所以並不支援對 CSS3 沒有支援的 IE10 以下的瀏覽器並不支援。

使用方法：
第一步 載入 3D Thumbnail hover effects 需要用到的 CSS 和 JavaScript 檔
<!-- 這一個範例的 CSS 效果-->
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style_common.css" />
<!-- 3D Thumbnail hover effects 折疊式效果的 CSS3 設計 -->
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<!-- 3D Thumbnail hover effects 主程式碼-->
<script type="text/javascript" src="js/modernizr.custom.69142.js"></script>

第二步 範例圖片的 HTML 程式碼
<div class="container">
  <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">&rarr;</a>
</div>
<img src="images/1.jpg" />
  </div>
  <div class="view">
<div class="view-back">
 <span data-icon="A">210</span>
 <span data-icon="B">102</span>
 <a href="http://www.flickr.com/photos/ag2r/5629018757/in/photostream">&rarr;</a>
</div>
<img src="images/2.jpg" />
  </div>
  <div class="view">
<div class="view-back">
 <span data-icon="A">690</span>
 <span data-icon="B">361</span>
 <a href="http://www.flickr.com/photos/ag2r/6271521984/in/photostream">&rarr;</a>
</div>
<img src="images/3.jpg" />
  </div>
  <div class="view">
<div class="view-back">
 <span data-icon="A">987</span>
 <span data-icon="B">130</span>
 <a href="http://www.flickr.com/photos/ag2r/6131126901/in/photostream">&rarr;</a>
</div>
<img src="images/4.jpg" />
  </div>
  </div>
</div>

第三步 寫入 JavaScript 的程式碼片段
Modernizr.load({
test: Modernizr.csstransforms3d && Modernizr.csstransitions,
yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','js/jquery.hoverfold.js'],
nope: 'css/fallback.css',
callback : function( url, result, key ) {
 if( url === 'js/jquery.hoverfold.js' ) {
   $( '#grid' ).hoverfold();
 }
}
});

作者網站：http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/
檔案大小：239 KB (包含範例)
檔案下載：http://tympanus.net/Tutorials/3DHoverEffects/3DHoverEffects.zip
檔案備份：下載