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

最新推荐文章于 2021-12-18 14:48:30 发布

kaitaow

最新推荐文章于 2021-12-18 14:48:30 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/foreverkoking/article/details/11391203

版权

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

代码实现

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<link rel="stylesheet" href="css/cardflip.css"></link>
<title>CSS3实现游戏王卡片翻转效果</title>
</head>
<body>
<section id="game">
<div id="cards">
<div class="card">
<div class="face front"></div>
<div class="face back cardAK"></div>
</div>
</div>
</section>
<script src="js/jquery-1.6.min.js"></script>
<script>
$(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");
		});
	});
});
</script>
</body>
</html>

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来控制卡片的正面与背面的显示。