css实现卡片悬浮翻转效果代码-html代码-BFW代码库

css实现卡片悬浮翻转效果代码

代码语言：html

所属分类：悬停

代码描述：css实现卡片悬浮翻转效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    /*     ================================        Best Viewed In Full Page    ================================*//* Hover over a card to flip,can tab too. */@import url('https://fonts.googleapis.com/css?family=Lato');
	/* default */*,*::after,*::before {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
/* body */body {
	min-height:100vh;
	padding:40px;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	background:hsl(220,10%,12%);
	font-family:"Lato","Segoe Ui",-apple-system,BlinkMacSystemFont,sans-serif;
}
/* .flip-card-container */.flip-card-container {
	--hue:150;
	--primary:hsl(var(--hue),50%,50%);
	--white-1:hsl(0,0%,90%);
	--white-2:hsl(0,0%,80%);
	--dark:hsl(var(--hue),25%,10%);
	--grey:hsl(0,0%,50%);
	width:310px;
	height:500px;
	margin:40px;
	-webkit-perspective:1000px;
	perspective:1000px;
}
/* .flip-card */.flip-card {
	width:inherit;
	height:inherit;
	position:relative;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	transition:.6s .1s;
}
/* hover state */.flip-card-container:hover .flip-card,.flip-card-container:focus-within .flip-card {
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
}
/* .card-... */.card-front,.card-back {
	width:100%;
	height:100%;
	border-radius:24px;
	background:var(--dark);
	position:absolute;
	top:0;
	left:0;
	overflow:hidden;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	display:flex;
	justify-content:center;
	align-items:center;
}
/* .card-front */.card-front {
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
	z-index:2;
}
/* .card-back */.card-back {
	-webkit-transform:rotateY(180deg);
	transform:rota.........完整代码请登录后点击上方下载按钮下载查看