css3之 谜灯卡片_使用css3进行简单的卡片翻转

body{background:#e5e5e5;}

.card{-webkit-perspective:300;width:80px;height:120px;margin:8px;position:relative}

.face{border-radius:10px;width:100%;height:100%;position:absolute;

-webkit-transition:all 0.4s;-webkit-backface-visibility:hidden;

}

.front{background: blue;z-index:10;}

.back{-webkit-transform:rotate3d(1,0,0,-180deg);z-index:8;}

.card-flipped .front{-webkit-transform:rotate3d(1,0,0,180deg);z-index:8;}

.card-flipped .back{-webkit-transform:rotate3d(1,0,0,0deg);z-index:10;}

.cardAK{background:red;}

abbbdd

31654

$(function(){

$('.card').hover(function() {

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

});

});