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 rgba(255,255,255,0.3);
        	transition:all 1.5s cubic-bezier(0.5,1.3,0.5,1.3);
        	transform-style:preserve-3d;
        	border-radius:10px 30px 10px 30px
        }
        .flip-item:hover .front-side {
        	transform:rotateY(360deg);
        	z-index:-1
        }
        .flip-item .front-side .content {
        	transform:translateZ(35px);
        	text-shadow:0 0 2px black
        }
        .flip-item .back-side {
        	//display:flex;
        	//position:absolute;
        	//justify-content:center;
        	//align-items:center;
        	width:100%;
        	height:100%;
        	flex:0 0 100%;
        	left:0;
        	top:0;
        	bottom:0;
        	z-index:-1;
        	transition:all 1.5s cubic-bezier(0.5,1.3,0.5,1.3);
        	transform-style:preserve-3d;
        	transform:rotateY(-360deg);
        	color:white;
        	background:linear-gradient(to top left,#89253e,#3a6186);
        	background-size:cover;
        	background-position:center;
        	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 rgba(255,255,255,0.3);
        	font-family:'Cabin',helvetica,arial,sans-serif;
        	border-radius:10px 30px 10px 30px
        }
        .flip-item:hover .back-side {
        	transform:rotateY(0deg);
        	z-index:10
        }
        .flip-item .back-side .content {
        	transform:translateZ(35px);
        	text-shadow:0 0 2px black
        }
        .flip-item .front-side .content .avatar-container {
        	//position:relative;
        	height:145px;
        	width:145px;
        	border:.5px solid #9e2f4b;
        	border-width:.5px;
        	border-radius:100px;
        	box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);
        	background-image:radial-gradient(#9198e5,#89253e,#3a6186)
        }
        .rounded-gradient-borders {
        	height:145px;
        	width:145px;
        	//display:flex;
        	//vertical-align:middle;
        	//justify-content:center;
        	//align-items:center;
        	border:double 2px transparent;
        	border-radius:100px;
        	backg.........完整代码请登录后点击上方下载按钮下载查看