css3 卡片hover3D效果

女爷i 2021-09-07 06:19 528阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1c2lyeGlhZXI_size_16_color_FFFFFF_t_70][]

鼠标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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1c2lyeGlhZXI_size_16_color_FFFFFF_t_70]: /images/20210813/0040400b274045a1bb119a06a8f92972.png