ホームページ >ウェブフロントエンド >htmlチュートリアル >シンプルで実用的な jQuery と CSS3 カードの自動反転効果_html/css_WEB-ITnose
簡単なチュートリアル
これは、シンプルで実用的な jQuery と CSS3 カードの自動反転エフェクトです。カード反転効果は、CSS3 パースペクティブと背面可視性プロパティを使用してカードの表と裏の効果を作成し、jQuery を使用してカードを自動的に回転します。
デモを見る プラグインのダウンロード
使用法
HTML 構造
カードの自動反転効果の HTML 構造は次のとおりです。front はカードの表面、back はカードの裏面です。
<div class="card" style="height: 165px;"> <div class="face front"> <a href="#"> <img src="picture/1.png"> </a> </div> <div class="face back cardAK"> <img src="picture/2.png"> </a> </div></div><div class="circle" id="circles-1"></div>
CSS スタイル
CSS スタイルでは、CSS3 のパースペクティブ プロパティを通じて 3D パースペクティブ効果を設定し、backface-visibility を通じてカードに表と裏の機能を追加します。次に、rotate3d 関数を使用してカードを裏返します。
.contaier{width: 640px; margin: 30px auto;}.card { perspective: 1000; -webkit-perspective: 1000; width: 100%; margin-bottom: 3px;}.face{ position: absolute; border-radius:5px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; backface-visibility: hidden; -ms-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; background-color: rgb(178, 39, 49);}.front { z-index: 10;}.back{ transform:rotate3d(0,1,0,-180deg); -ms-transform:rotate3d(0,1,0,-180deg); /* IE 9 */ -moz-transform:rotate3d(0,1,0,-180deg); /* Firefox */ -webkit-transform:rotate3d(0,1,0,-180deg); /* Safari 和 Chrome */ -o-transform:rotateY(0,1,0,-180deg); /* Opera */ z-index: 8;}.card-flipped .front{ transform:rotate3d(0,1,0,180deg); -ms-transform:rotate3d(0,1,0,180deg);/* IE 9 */ -moz-transform:rotate3d(0,1,0,180deg);/* Firefox */ -webkit-transform:rotate3d(0,1,0,180deg);/* Safari 和 Chrome */ -o-transform:rotate3d(0,1,0,180deg); /* Opera */ z-index: 8;}.card-flipped .back{ transform:rotate3d(0,1,0,0deg); -ms-transform:rotate3d(0,1,0,0deg);/* IE 9 */ -moz-transform:rotate3d(0,1,0,0deg);/* Firefox */ -webkit-transform:rotate3d(0,1,0,0deg);/* Safari 和 Chrome */ -o-transform:rotate3d(0,1,0,0deg); /* Opera */ z-index: 10;}
初期化プラグイン
カード反転エフェクトは jQuery コードを使用して、対応するクラスを定期的に切り替えるコードは非常に単純です。カードの反転効果を実現します。
$(function () { flip();});function flip() { var timer = null; var i = 0;var j = 0; var aFlip = $(".card"); function flipFn(arg1, arg2) { aFlip.eq(i).toggleClass('card-flipped'); i++; if(i==5){ i=0; } } timer = setInterval(flipFn, 2000);}
ソース jQuery ホーム