CSS3之翻牌效果
今天博主给小伙伴们分享的是CSS3之翻牌效果！
直接贴代码：
<!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>
<style>
.box{
position:relative;
width:300px;
height:500px;
margin: 30px auto;
perspective: 500px;
}
.pai{
transition:3s;
transform-style:preserve-3d;
background-color:yellow;
}
.pai,.z,.f{
position:absolute;
left:0;
top: 0;
width:100%;
height: 100%;
}
.z{
background: url(6.jpg) center center /cover no-repeat ;
transform:translateZ(10px);
}
.f{
background: url(7.jpg) center center /cover no-repeat ;
transform:translateZ(-10px) rotateY(180deg) ;
}
.box:hover .pai{
transform:rotateY(180deg);
}
</style>
</head>
<body>
<div class='box'>
<div class="pai">
<div class="z"></div>
<div class="f"></div>
</div>
</div>
</body>
</html>
效果图如下：由于是动态的，，只能截图说了
好了，，，，今天的分享就到这里了！