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

代码语言：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;
        	background-image:radial-gradient(#9198e5,#89253e,#3a6186);
        	background-origin:border-box;
        	background-clip:content-box,border-box;
        	box-shadow:0 3px 3px rgba(0,0,0,0.19),0 3px 3px rgba(0,0,0,0.23);
        	animation:rotate 1s linear infinite;
        	z-index:10
        }
        .flip-item .front-side .content .avatar-container .avatar {
        	height:145px;
        	width:145px;
        	//display:flex;
        	//justify-content:center;
        	//align-items:center;
        	border-radius:50%;
        	animation:none;
        	z-index:10;
        	//position:absolute;
        	top:50%;
        	left:50%;
        	margin-right:-50%;
        	transform:translate(-50%,-50%)
        }
        .flip-item .front-side .content .member-name,.flip-item .back-side .content .job-title {
        	text-shadow:1px 4px 4px rgba(0,0,0,0.2);
        	font-size:16px;
        	font-weight:bolder;
        	letter-spacing:3px
        }
        .flip-item .back-side .content .job-description {
        	font-size:14px;
        	letter-spacing:3px
        }
        @keyframes rotate {
        	0% {
        	transform:rotate(0deg)
        }
        25% {
        	transform:rotate(90deg)
        }
        50% {
        	transform:rotate(180deg)
        }
        75% {
        	transform:rotate(270deg)
        }
        100% {
        	transform:rotate(360deg)
        }
        }
    </style>
</head>

<body>
    <div class="container-fluid wrapper d-flex align-middle justify-content-center align-items-center">
        <div class="row">
            <div class="col-md-12">
                <!-- OUR TEAM -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="our-team d-flex align-items-center justify-content-center p-5">我们的团队 </div>
                    </div>
                </div>
                <!-- OUR TEAM END -->
                <!-- ROW FLIP ITEMS -->
                <div class="row pt-5">
    .........完整代码请登录后点击上方下载按钮下载查看