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:i.........完整代码请登录后点击上方下载按钮下载查看