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
>
效果图如下：由于是动态的，，只能截图说了
好了，，，，今天的分享就到这里了！