html 翻转卡片效果,CSS3 兑现游戏王卡片翻转效果

CSS3 实现游戏王卡片翻转效果

点击卡片之后，卡片会有一个慢慢翻开的渐变效果。

代码实现

CSS3实现游戏王卡片翻转效果

$(function(){

$("#cards").children().each(function(index){

// listen the click event on each card DIV element.

$(this).click(function() {

// add the class "card-flipped".

// the browser will animate the styles between current state and card-flipped state.

$(this).toggleClass("card-flipped");

});

});

});

cardflip.css

body

{

background: url(../images/bg.png);

}

.card

{

-webkit-perspective:600;

width:80px;

height:120px;

margin:8px;

}

.face

{

border-radius:10px;

width:100%;

height:100%;

position:absolute;

-moz-transition:all 0.3s;

-webkit-transition:all 0.3s;

transition:all 0.3s;

-webkit-backface-visibility:hidden;

}

.front

{

background: url(../images/card_bg.png);

z-index:10;

}

.back

{

-moz-transform:rotate3d(0,1,0,-180deg);

-webkit-transform:rotate3d(0,1,0,-180deg);

transform:rotate3d(0,1,0,-180deg);

z-index:8;

}

.card-flipped .front

{

-moz-transform:rotate3d(0,1,0,180deg);

-webkit-transform:rotate3d(0,1,0,180deg);

transform:rotate3d(0,1,0,180deg);

z-index:8;

}

.card-flipped .back

{

-moz-transform:rotate3d(0,1,0,0deg);

-webkit-transform:rotate3d(0,1,0,0deg);

transform:rotate3d(0,1,0,0deg);

z-index:10;

}

.cardAK

{

background:url(../images/AK.png);

}

值得注意的地方

鼠标点击事件的检测和处理

使用了jquery的toggleClass函数

通过调整z-index来控制卡片的正面与背面的显示。