翻牌动画.html

小阴每天打代码

已于 2024-08-28 20:13:14 修改

阅读量244

点赞数

分类专栏： html 文章标签： css3 css html

于 2022-05-26 18:08:46 首次发布

本文链接：https://blog.csdn.net/weixin_45354103/article/details/124989787

版权

html 专栏收录该内容

11 篇文章 3 订阅

订阅专栏

本文介绍如何利用CSS3的transform和transition属性创建逼真的翻牌动画效果，适用于制作卡片式界面或游戏等场景。

摘要由CSDN通过智能技术生成

翻牌动画.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>翻牌动画</title>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
		outline: none;
	}
	div{
		width: 223px;
		height: 333px;
		margin: 50px auto;
		position: relative;
		perspective: 400px;
	}
	img{
		position: absolute;
		top: 0;
		left: 0;
		backface-visibility: hidden;
		transition: all 1s linear 0s;
	}
	.ka02{
		transform: rotateY(180deg);
	}
	div:hover .ka02{
		transform: rotateY(0deg);
	}
	div:hover .ka01{
		transform:rotateY(-180deg);
	}
</style>
</head>

<body>
	<div>
		<img class="ka01" src="../1images第8章素材/images/ka01.png"/>
		<img class="ka02" src="../1images第8章素材/images/ka02.png"/>
	</div>
</body>
</html>