大家有没有看到过网上很炫的翻牌效果，牌正面对着我们，然后点击一下，牌就被翻过来了，效果很酷炫，是不是很想知道是怎么实现的么，代码很简单，跟着小编往下走。

先给大家介绍一下翻牌的原理：

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:;/*让正面朝上*/

}

.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实现翻牌特效的更多相关文章

  1. CSS制作翻牌特效

    应一个朋友要求替他把原本静态页面做成翻牌的特效. 主要应用了CSS3的transform,transiton.首先写好标签,一个ul下两个li元素,通过position的absolue设置两个li元素 ...

  2. 纯css实现下雪特效

    //------------------ css ------------------- /*Keyframes*/ @keyframes snow { 0% { background-positio ...

  3. iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效

    iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建,便于修改变量.有模块化的代码,无需包含整个 ...

  4. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  5. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  6. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  7. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  8. 纯CSS + 媒体查询实现网页导航特效

    纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...

  9. 纯CSS实现的风车转动效果特效演示

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. webpack学习笔记（二）-- 初学者常见问题及解决方法

    这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...

  2. JS的DOM操作及动画

    JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...

  3. Win10 Bash/WSL调试Linux环境下的.NET Core应用程序

    一.简介 使用过Mac OS的程序员都知道,在Mac Book Pro上写程序是一件比较爽的事儿,作为dotneter,我们都比较羡慕Mac系统的环境,比如命令行,当然设备也是挺漂亮的. 在新的Win ...

  4. Unity - 通过降低精度减少动画文件的大小

    Animation是Unity中的动画文件,主要内容由一个个关键帧数据构成.通过将Unity的资源序列化方式调整为Text,就可以以文本方式查看动画文件.通过菜单项Edit -> Project ...

  5. css 样式表 基础 样式

    1大小 width  宽度 height 高度 2 背景 background-color 背景色 background-image:url(图片位置) 背景图片 background-repeat: ...

  6. 手机自动化测试：Appium源码之API(2)

    手机自动化测试:Appium源码之API(2)   TouchAction AppiumDriver的辅助类,主要针对手势操作,比如滑动.长按.拖动等.TouchAction的原理是讲一系列的动作放在 ...

  7. Linux的链接文件-ln命令

    Linux的链接文件 使用ln命令来创建链接文件(link) Linux链接分两种:硬链接(Hard Link),符号链接(Symbolic Link) 默认情况下,ln命令产生硬链接. [root@ ...

  8. mysql 分析2 show processlist ;

    show processlist ; 可以查看当前有哪些链接 处于什么状态 分析语句 那些连接处于什么状态 (需要通过脚本观察一段时间内的有运行情况做出统计一直刷新服务器运行状态 ) 当出现下面的几种 ...

  9. c#控制台实现post网站登录

    如题,首先我写了一个web页面来实现post登陆,只做演示,代码如下 public void ProcessRequest(HttpContext context) { context.Respons ...

  10. Mysql Innodb体系结构

    Innodb体系结构 Innodb存储引擎主要包括内存池以及后台线程. 内存池:多个内存块组成一个内存池,主要维护进程/线程的内部数据.缓存磁盘数据,修改文件前先修改内存.redo log 后台线程: ...