鼠标滑过，卡片翻转，如果想要点击卡片翻转的话就把 ：hover 改成 .hover ，然后自己添加点击事件 添加 class hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style type="text/css">
.flip-card-front {
background-color: #6fd7d6;
color: white;
/*正面文字颜色*/
}
/*卡片翻過顔色*/
.flip-card-back {
background-color: #6fd7d6;
color: white;
}
.flip-card {
background-color: transparent;
perspective: 1000px;
-webkit-perspective: 1000px;
height: 200px !important;
cursor: pointer;
width: 100%;
}
.flip-card-inner {
position: relative;
width: inherit;
height: inherit;
text-align: center;
transition: transform 0.6s;
-moz-transition: transform 0.6s;
/* Firefox 4 */
-webkit-transition: transform 0.6s;
/* Safari 和 Chrome */
-o-transition: transform 0.6s;
/* Opera */
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card-front,
.flip-card-back {
position: absolute !important;
top: 0;
left: 0;
width: inherit;
height: inherit;
backface-visibility: hidden !important;
-webkit-backface-visibility: hidden !important;
-moz-backface-visibility: hidden !important;
-ms-backface-visibility: hidden !important;
}
.flip-card-front {
z-index: 900 -webkit-transform: rotateX(0) rotateY(0);
transform: rotateX(0) rotateY(0);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
/* -- transition is the magic sauce for animation -- */
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.flip-card:hover .flip-card-inner .flip-card-front {
z-index: 900;
-webkit-transform: rotateY(179deg);
transform: rotateY(179deg);
}
.flip-card-back {
z-index: 800;
-webkit-transform: rotateY(-179deg);
transform: rotateY(-179deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
/* -- transition is the magic sauce for animation -- */
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.flip-card:hover .flip-card-inner .flip-card-back {
z-index: 1000;
-webkit-transform: rotateX(0) rotateY(0);
transform: rotateX(0) rotateY(0);
}
</style>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p>正面文字</p>
</div>
<div class="flip-card-back">
<p>背面文字</p>
</div>
</div>
</div>
</body>
</html>
