シンプルで実用的な 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="/static/imghwm/default1.png"  data-src="picture/1.png"  class="lazy" alt="シンプルで実用的な jQuery と CSS3 カードの自動反転効果_html/css_WEB-ITnose" >    </a>  </div>  <div class="face back cardAK">    <img  src="/static/imghwm/default1.png"  data-src="picture/2.png"  class="lazy" alt="シンプルで実用的な jQuery と CSS3 カードの自動反転効果_html/css_WEB-ITnose" > </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 ホーム