图片/图形
简单实用jQuery+CSS3卡片自动翻牌特效
PetitQ
这是一款简单实用的 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);
}
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
