Flip card 卡片翻转效果

最新推荐文章于 2024-03-22 18:06:10 发布

小小程序员——Tracy

最新推荐文章于 2024-03-22 18:06:10 发布

阅读量470

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_48702807/article/details/115397156

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

鼠标滑过，卡片翻转，如果想要点击卡片翻转的话就把：hover 改成 .hover ，然后自己添加点击事件添加 class hover

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<style type="text/css">
	.flip-card-front {
		background-color: #6fd7d6;
		color: white;
		/*正面文字颜色*/
	}

	/*卡片翻過顔色*/
	.flip-card-back {
		background-color: #6fd7d6;
		color: white;
	}

	.flip-card {
		background-color: transparent;
		perspective: 1000px;
		-webkit-perspective: 1000px;
		height: 200px !important;
		cursor: pointer;
		width: 100%;
	}

	.flip-card-inner {
		position: relative;
		width: inherit;
		height: inherit;
		text-align: center;
		transition: transform 0.6s;
		-moz-transition: transform 0.6s;
		/* Firefox 4 */
		-webkit-transition: transform 0.6s;
		/* Safari 和 Chrome */
		-o-transition: transform 0.6s;
		/* Opera */

		transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	}


	.flip-card-front,
	.flip-card-back {
		position: absolute !important;
		top: 0;
		left: 0;
		width: inherit;
		height: inherit;
		backface-visibility: hidden !important;
		-webkit-backface-visibility: hidden !important;
		-moz-backface-visibility: hidden !important;
		-ms-backface-visibility: hidden !important;
	}

	.flip-card-front {
		z-index: 900 -webkit-transform: rotateX(0) rotateY(0);
		transform: rotateX(0) rotateY(0);

		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;

		/* -- transition is the magic sauce for animation -- */
		-webkit-transition: all .4s ease-in-out;
		transition: all .4s ease-in-out;
	}

	.flip-card:hover .flip-card-inner .flip-card-front {
		z-index: 900;
		-webkit-transform: rotateY(179deg);
		transform: rotateY(179deg);
	}

	.flip-card-back {
		z-index: 800;
		-webkit-transform: rotateY(-179deg);
		transform: rotateY(-179deg);

		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;

		/* -- transition is the magic sauce for animation -- */
		-webkit-transition: all .4s ease-in-out;
		transition: all .4s ease-in-out;

	}

	.flip-card:hover .flip-card-inner .flip-card-back {
		z-index: 1000;
		-webkit-transform: rotateX(0) rotateY(0);
		transform: rotateX(0) rotateY(0);
	}
	</style>
	<div class="flip-card">
		<div class="flip-card-inner">
			<div class="flip-card-front">
				<p>正面文字</p>
			</div>
			<div class="flip-card-back">
				<p>背面文字</p>
			</div>
		</div>
	</div>
</body>

</html>

小小程序员——Tracy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flip card 卡片翻转效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <style type="text/c.
复制链接

扫一扫