css3 卡片hover3D效果

最新推荐文章于 2023-08-02 16:45:48 发布

yusirxiaer

最新推荐文章于 2023-08-02 16:45:48 发布

阅读量588

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/yusirxiaer/article/details/115036502

版权

css 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

鼠标hover卡片向上翻转，看简易代码

<!DOCTYPE html>
<html>
<head>
	<title>3D Flip Card hover effects</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font-family: consolas;
			box-sizing: border-box;
		}
		body {
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 100vh;
			background: #1e1e1e;
		}
		.container {
			width: 1000px;
			position: relative;
			display: flex;
			justify-content: space-between;
		}
		.container .card {
			position: relative;
			width: 300px;
			height: 200px;
		}
		.container .card .face {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transition: 0.5s;
		}
		.container .card .face.face1 {
			background:#333;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 1;
			transform-origin: bottom;
		}
		.container .card .face.face1 img {
			max-width: 100px;
		}
		.container .card .face.face1 h3 {
			margin: 10px 0 0;
			color: white;
			text-align: center;
			font-size: 1.5em;
		}
		.container .card:hover .face.face1 {
			transform: translateY(-100%) rotateX(90deg);
			background: #ff0057;
		}
		.container .card .face.face2 {
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20px;
			transform-origin: top;
			transform: translateY(100%) rotateX(90deg);
		}
		.container .card:hover .face.face2 {
			transform: translateY(0%) rotateX(0deg);
		}

	</style>
</head>
<body>
	<div class="container">
		<div class="card">
			<div class="face face1">
				<div class="content">
					<img src="design.png">
					<h3>Design</h3>
				</div>
			</div>
			<div class="face face2">
				<div class="content">
					<p>预览</p>
					<p>下载</p>
				</div>
			</div>
		</div>
		<div class="card">
			<div class="face face1">
				<div class="content">
					<img src="Code.png">
					<h3>Code</h3>
				</div>
			</div>
			<div class="face face2">
				<div class="content">
					<p>预览</p>
					<p>下载</p>
				</div>
			</div>
		</div>
		<div class="card">
			<div class="face face1">
				<div class="content">
					<img src="lanuch.png">
					<h3>Lanuch</h3>
				</div>
			</div>
			<div class="face face2">
				<div class="content">
					<p>预览</p>
					<p>下载</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

yusirxiaer

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
css3 卡片hover3D效果

鼠标hover卡片向上翻转，看简易代码<!DOCTYPE html><html><head> <title>3D Flip Card hover effects</title> <style type="text/css"> * { margin: 0; padding: 0; font-family: consolas; box-sizing: border-box; } bod..
复制链接

扫一扫