纯css实现翻牌特效
2017-05-04 20:27
274 查看
大家有没有看到过网上很炫的翻牌效果,牌正面对着我们,然后点击一下,牌就被翻过来了,效果很酷炫,是不是很想知道是怎么实现的么,代码很简单,跟着小编往下走。
先给大家介绍一下翻牌的原理:
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转到正面来。
原理就是这样,下面就开始看具体代码吧。
案例展示:
http://211.140.7.173:8081/t/wuhairui/fanpai/index.html
先给大家介绍一下翻牌的原理:
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转到正面来。
原理就是这样,下面就开始看具体代码吧。
<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>
.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);(180); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform:rotateY(180deg); -o-transform:rotateY(180deg); }
<html>
<head>
<meta charset="UTF-8">
<title>翻牌</title>
<style type="text/css">
body,div{margin:0;padding:0;}
.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);(180); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform:rotateY(180deg); -o-transform:rotateY(180deg); }
</style>
</head>
<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>
案例展示:
http://211.140.7.173:8081/t/wuhairui/fanpai/index.html
相关文章推荐
- 纯css实现翻牌特效
- 用CSS实现文字变图象特效
- [转贴]CSS+JS实现网页(图片)特效
- iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效
- css+javascript特效:时钟(无图片纯div实现)
- CSS实现页面图片阴影特效
- 用CSS实现文字变图象特效
- css实例教程 一款纯css3实现的超炫动画背画特效
- 纯CSS实现3D翻牌效果
- 用CSS实现图片特效代码
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
- 特效:CSS+Javascript实现表格背景变色
- 用CSS 3和HTML 5实现五例Web特效
- DIV+CSS实现的滑动门菜单特效代码
- iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效
- CSS+JS实现网页(图片)特效
- 用CSS实现鼠标单击特效
- 用CSS实现图片特效代码
- 用html+css+js实现的一个简单的图片切换特效
- 一款css实现的鼠标经过按钮的特效