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