css实现团队成员介绍卡片悬浮三维翻转动画效果代码-html代码-BFW代码库

css实现团队成员介绍卡片悬浮三维翻转动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现团队成员介绍卡片悬浮三维翻转动画效果代码

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

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

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <style>
        html,body {
        	min-height:100vh;
        	width:100%;
        	-ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0,startColorstr=#1471da,endColorstr=#1C85FB)";
        	margin:0;
        	padding:0;
        	background-image:linear-gradient(315deg,#772f1a 0,#b2b2b2 74%)
        }
        .container-fluid {
        	height:100%;
        	width:100%
        }
        .wrapper {
        	display:flex;
        	vertical-align:middle;
        	justify-content:center;
        	//display:flex;
        	height:100%;
        	//vertical-align:middle;
        	//justify-content:center;
        	//align-items:center;
        	padding-top:10%
        }
        .our-team {
        	color:#ffff;
        	font-size:40px;
        	font-weight:bolder;
        	letter-spacing:6px;
        	background:linear-gradient(to top left,#3a6186,#89253e)
        }
        .flip-item {
        	//display:flex;
        	//position:relative;
        	min-height:350px;
        	min-width:300px;
        	//flex-wrap:wrap;
        	border:10px solid transparent;
        	padding:0;
        	border-top:0;
        	perspective:1000px
        }
        .flip-item .front-side {
        	//display:flex;
        	//position:absolute;
        	//justify-content:center;
        	//align-items:center;
        	width:100%;
        	height:100%;
        	z-index:10;
        	flex:0 0 100%;
        	color:white;
        	transition:all 1.5s ease;
        	background-size:cover;
        	background-position:center;
        	background:linear-gradient(to top left,#3a6186,#89253e);
        	box-shadow:inset 0 0 0 rgba(0,0,0,0.1),inset 0 -1px 0 rgba(255,255,255,0.19),inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 r.........完整代码请登录后点击上方下载按钮下载查看