简单实用的jQuery和CSS3卡片自动翻牌特效

所属分类:其他-动画效果

 43395  344  查看评论 (0)
分享到微信朋友圈
X
简单实用的jQuery和CSS3卡片自动翻牌特效 ie兼容10

简要教程

这是一款简单实用的jQuery和CSS3卡片自动翻牌特效。该卡片翻转效果使用CSS3透视和backface-visibility属性来制作卡片正反面效果,并使用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的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);
}

    

相关插件-动画效果

超简单自定义粒子背景动画插件(原创)

这是一个可以自定义粒子背景的插件,可实现全屏,鼠标跟随,自定义坐标三种方式的动画控制,同时也可以使用不同颜色或者不同的图片实现粒子的个性化
  动画效果
 28445  291

jQuery制作360度旋转雷达扫描动画

这是一款带科技感的jQuery制作360度旋转雷达扫描动画特效,雷达扫描信息认证动画效果。
  动画效果
 25149  343

jQuery雪花飘落

jQuery雪花飘落(pc端及移动端均兼容)
  动画效果
 34096  447

纯JS数字滚动效果(原创)

纯JS数字滚动效果,兼容IE9+、但不兼容水晶字体,需要谷歌浏览器支持
  动画效果
 34248  286

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复