个人资料卡3D旋转效果

发布于 2020-02-16  305 次阅读

展示地址：http://show.cqdefxxx.com/business%20card%20with%203d%20flip%20animation/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <link rel="stylesheet" href="style.css">
        <link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/all.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	</head>
	<body>
        <div class="business-card middle">
            <div class="front">
                <h2>Hello Welcome!</h2>
                <span>FonetEnd Engineer</span>
                <ul class="contact-info">
                    <li>
                        <i class="fas fa-mobile-alt"></i> 13697252729
                    </li>
                    <li>
                        <i class="far fa-envelope"></i> xyqxxx12@foxmail.com
                    </li>
                    <li>
                        <i class="fas fa-map-marker-alt"></i> China,Fujian
                    </li>
                </ul>
            </div>
            <div class="back">
                xyqxxx12点击我
            </div>
        </div>
        <script type="text/javascript">
            $(".business-card").click(function(){
                $(".business-card").toggleClass("business-card-active");
            })
        </script>
	</body>
</html>

style.css

*{
    margin:0;
    padding: 0;
    font-family: "montserrat",sans-serif;
    box-sizing: border-box;
    list-style: none;
}

body{
    background: url(bg.png) no-repeat;
    background-size: cover;
    min-height: 100vh;
    min-width: 80vh;
}

.business-card{
    width:500px;
    height: 280px;

}

.middle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
}

.front,.back{
    width:100%;
    height: 100%;
    overflow: hidden;    
    position: absolute;
    backface-visibility: hidden;
    transition: transform 0.5s linear;
}

.front{
    background: rgba(255,255,255,0.7);
    padding:40px;
    transform: perspective(600px) rotateX(180deg);
}

.front:before,.front:after{
    content: "";
    position: absolute;
    right: 0;
}

.front:before{
    width:0px;
    height: 0px;
    bottom: 0;
    border-bottom: 200px solid #065279;
    border-left: 100px solid transparent;
}

.front:after{
    width:0px;
    height: 0px;
    top: 0;
    border-top: 200px solid #065279;
    border-left: 100px solid transparent;
}

.front span{
    background: #065279;
    color:#fff;
    padding:4px 18px;
    display: inline-block;
    margin-bottom: 20px;
    font-size:14px;
}


.front .contact-info li{
    margin:10px 0;
    display: flex;
    align-items: center;
}

.front .contact-info li i{
    width:26px;
    height: 26px;
    background: #065279;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right:6px;
}
.back{
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    letter-spacing: 6px;
    font-size: 24px;
    transform: perspective(600px) rotateX(0deg);
}

.business-card-active .front{
    transform: perspective(600px) rotateX(0deg);
}
.business-card-active .back{
    transform: perspective(600px) rotateX(-180deg);
}

 

注错之当