<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.flip_wrap {
width: 210px;
height: 220px;
margin: 0 auto;
perspective: 800px;
/*perspective属性定义3D元素距视图的距离,以像素计。该属性允许您改变 3D
元素查看 3D 元素的视图。*/
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
}
.flip {
width: 210px;
height: 220px;
backface-visibility: hidden;
/*背对屏幕时隐藏*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
transition: all 1s ease;
/*为翻牌添加过渡效果*/
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transform-style: preserve-3d;
/*子元素将保留其 3D 位置。*/
}
.side {
width: 100%;
height: 100%;
position: absolute;
/*让背面和正面重叠*/
left: 50%;
margin-left: -105px;
}
.front {
z-index: 2;
/*让正面朝上*/
}
.back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
}
.flip_wrap:hover .flip {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
}
</style>
<body>
<div class="flip_wrap">
<!-- 大容器 -->
<div class="flip">
<!--实现翻牌容器 -->
<div class="side front">
<!--牌正面 -->
<img src="http://wap.cmread.com/rbc/t/content/repository/ues/image/s109/fpbg2.png"> </div>
<div class="side back">
<!-- 牌背面 -->
<img src="http://wap.cmread.com/rbc/t/content/repository/ues/image/s109/fpbg.png"> </div>
</div>
</div>
</body>
</html>
网友评论