纯css实现翻牌特效
HTML5 纯css实现翻牌特效 [3/17]
大家有没有看到过网上很炫的翻牌效果，牌正面对着我们，然后点击一下，牌就被翻过来了，效果很酷炫，是不是很想知道是怎么实现的么，代码很简单，跟着小编往下走。
先给大家介绍一下翻牌的原理：
1、父容器设置设置perspective，让其子元素支持3d透视。
注：perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
2、牌正面和背面设置absolute属性，让正面的背面处于同一水平线上，用z-index属性设置背面朝上
3、让背面设置translateY(180)，沿y轴旋转180度，背面朝后，backface-visibility属性让背对屏幕的时候隐藏隐藏。
4、hover属性，当鼠标经过flip_wrap时，让flip沿y轴旋转180度，让正面绕y轴旋转180度到背面隐藏，背面沿y轴旋转180转到正面来。
原理就是这样，下面就开始看具体代码吧。
HTML
<
div
class=
"flip_wrap"
><!-- 大容器 -->
<
div
class=
"flip"
><!--实现翻牌容器 -->
<
div
class=
"side front"
><!--牌正面 -->
<
img
src=
"
http://
wap.cmread.com/rbc/t/co
ntent/repository/ues/image/s109/fpbg2.png
"
>
</
div
>
<
div
class=
"side back"
><!-- 牌背面 -->
<
img
src=
"
http://
wap.cmread.com/rbc/t/co
ntent/repository/ues/image/s109/fpbg.png
"
>
</
div
>
</
div
>
</
div
>
CSS
.flip_wrap{
width
:210
px
;
height
:220
px
;
margin
:0
auto
;
perspective
:800
px
;/*perspective属性定义3D元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。*/
-webkit-perspective
:800
px
;
-moz-perspective
:800
px
;
-ms-perspective
:800
px
;
-o-perspective
:800
px
;
}
.flip{
width
:210
px
;
height
:220
px
;
backface-visibility
:
hidden
;/*背对屏幕时隐藏*/
-webkit-backface-visibility
:
hidden
;
-moz-backface-visibility
:
hidden
;
-ms-backface-visibility
:
hidden
;
-o-backface-visibility
:
hidden
;
transition
:
all
1
s ease
; /*为翻牌添加过渡效果*/
-webkit-transition
:
all
1
s ease
;
-moz-transition
:
all
1
s ease
;
-ms-transition
:
all
1
s ease
;
-o-transition
:
all
1
s ease
;
transform-style
:
preserve-3d
; /*子元素将保留其 3D 位置。*/
}
.side{
width
:100%;
height
:100%;
position
:
absolute
;/*让背面和正面重叠*/
left
:50%;
margin-left
:-105
px
;
}
.front{
z-index
:2;/*让正面朝上*/
}
.back{
transform
:
rotateY
(180
deg
);
-webkit-transform
:
rotateY
(180
deg
);
-moz-transform
:
rotateY
(180
deg
);
-ms-transform
:
rotateY
(180
deg
);
-o-transform
:
rotateY
(180
deg
);
}
.flip_wrap:hover .flip{
transform
:
rotateY
(180
deg
);(180);
-webkit-transform
:
rotateY
(180
deg
);
-moz-transform
:
rotateY
(180
deg
);
-ms-transform
:
rotateY
(180
deg
);
-o-transform
:
rotateY
(180
deg
);
}
案例展示
完整代码
<
html
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
title
>
翻牌
</
title
>
<
style
type=
"text/css"
>
body,div{
margin
:0;
padding
:0;}
.flip_wrap{
width
:210
px
;
height
:220
px
;
margin
:0
auto
;
perspective
:800
px
;/*perspective属性定义3D元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。*/
-webkit-perspective
:800
px
;
-moz-perspective
:800
px
;
-ms-perspective
:800
px
;
-o-perspective
:800
px
;
}
.flip{
width
:210
px
;
height
:220
px
;
backface-visibility
:
hidden
;/*背对屏幕时隐藏*/
-webkit-backface-visibility
:
hidden
;
-moz-backface-visibility
:
hidden
;
-ms-backface-visibility
:
hidden
;
-o-backface-visibility
:
hidden
;
transition
:
all
1
s ease
; /*为翻牌添加过渡效果*/
-webkit-transition
:
all
1
s ease
;
-moz-transition
:
all
1
s ease
;
-ms-transition
:
all
1
s ease
;
-o-transition
:
all
1
s ease
;
transform-style
:
preserve-3d
; /*子元素将保留其 3D 位置。*/
}
.side{
width
:100%;
height
:100%;
position
:
absolute
;/*让背面和正面重叠*/
left
:50%;
margin-left
:-105
px
;
}
.front{
z-index
:2;/*让正面朝上*/
}
.back{
transform
:
rotateY
(180
deg
);
-webkit-transform
:
rotateY
(180
deg
);
-moz-transform
:
rotateY
(180
deg
);
-ms-transform
:
rotateY
(180
deg
);
-o-transform
:
rotateY
(180
deg
);
}
.flip_wrap:hover .flip{
transform
:
rotateY
(180
deg
);(180);
-webkit-transform
:
rotateY
(180
deg
);
-moz-transform
:
rotateY
(180
deg
);
-ms-transform
:
rotateY
(180
deg
);
-o-transform
:
rotateY
(180
deg
);
}
</
style
>
</
head
>
<
body
>
<
div
class=
"flip_wrap"
><!-- 大容器 -->
<
div
class=
"flip"
><!-- 实现翻牌容器 -->
<
div
class=
"side front"
><!-- 牌正面 -->
<
img
src=
"
http://
wap.cmread.com/rbc/t/co
ntent/repository/ues/image/s109/fpbg2.png
"
>
</
div
>
<
div
class=
"side back"
><!-- 牌背面 -->
<
img
src=
"
http://
wap.cmread.com/rbc/t/co
ntent/repository/ues/image/s109/fpbg.png
"
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
微信号：migufe
Web前端Talk，你身边的前端助手，值得期待
