效果：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D Flipping Effect</title>
<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
background-color: #bdc3c7;
color: white;
}
.middle{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.wrap{
width: 300px;
height: 500px;
position: relative;
}
.wrap h2{
font-size: 40px;
margin-bottom: 20px;
}
.front , .back{
width: 100%;
height: 100%;
position: absolute;
background: url(../img/bg.jpg);
background-size: cover;
backface-visibility: hidden;
box-shadow: 0 0 10px #2c3e50;
transition: .8s;
}
.front{
transform: perspective(800px) rotateY(0deg);
}
.back{
transform: perspective(800px) rotateY(180deg);
}
.back .contact-info{
margin-top: 10px;
}
.back .contact-info a{
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
text-decoration: none;
color: #d1d8e0;
border-radius: 50%;
}
.back .contact-info a:hover{
color: white;
background-color: #4a69bd;
}
.wrap:hover .front{
transform: perspective(800px) rotateY(-180deg);
}
.wrap:hover .back{
transform: perspective(800px) rotateY(0deg);
}
</style>
</head>
<body class="middle">
<div class="wrap">
<div class="front middle">
<h2>願意</h2>
<h3>用一支黑色的鉛筆</h3>
<h3>畫一出沉默舞臺劇</h3>
</div>
<div class="back middle">
<h2>願意</h2>
<h3>在角落唱沙啞的歌</h3>
<h3>再大聲也都是給你</h3>
<div class="contact-info">
<a href="#"><i class="iconfont icon-weibo"></i></a>
<a href="#"><i class="iconfont icon-weixin"></i></a>
<a href="#"><i class="iconfont icon-tuite"></i></a>
<a href="#"><i class="iconfont icon-youtube"></i></a>
</div>
</div>
</div>
</body>
</html>