全國服務熱線400-0000000 企業熱線0561-3023030

簡單實用的jQuery和CSS3卡片自動翻牌特效

簡要教程

這是一款簡單實用的jQuery和CSS3卡片自動翻牌特效。該卡片翻轉效果使用CSS3透視和backface-visibility屬性來制作卡片正反面效果,并使用jQuery使其自動旋轉起來。

 

yAfyE3u.jpg
 

 

查看演示       下載插件

使用方法

HTML結構

該卡片自動翻轉效果的HTML結構如下:front為卡片的正面,back為卡片的反面。

<div  style="height: 165px;">
  <div >
    <a href="#">
      <img src="picture/1.png">
    </a>
  </div>
  <div >
    <img src="picture/2.png"> </a>
  </div>
</div><div  ></div>

CSS樣式

在CSS樣式中,通過CSS3的perspective屬性設置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代碼來翻轉卡片,代碼非常簡單,通過一個定時器來定時切換相應卡片的class類,實現卡片的翻轉效果。

$(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和CSS3卡片自動翻牌特效"為相王科技 Array原創文章,轉載請注明出處,謝謝合作!

推薦閱讀

梦幻诛仙下载