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

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

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. C++11右值引用和std::move语句实例解析

    关键字:C++11,右值引用,rvalue,std::move,VS 2015 OS:Windows 10 右值引用(及其支持的Move语意和完美转发)是C++0x将要加入的最重大语言特性之一.从实践 ...

  2. JavaScript贪食蛇游戏制作详解

    之前闲时开发过一个简单的网页版贪食蛇游戏程序,现在把程序的实现思路写下来,供有兴趣同学参考阅读. 代码的实现比较简单,整个程序由三个类,一组常量和一些游戏逻辑以外的初始化和控制代码组成,总共400多行 ...

  3. 《连载 | 物联网框架ServerSuperIO教程》- 17.支持实时数据库，高并发保存测点数据。附：3.4 发布与版本更新说明。

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  4. 第六章:3D向量类

    第一节:类接口的设计 1.好的类在设计之前首先要回答下列问题:“这些类将包含哪些数据?”,“这个类将提供什么样的操作?”,“在哪些数据上执行操作?”. 我们已经知道我们要设计的是3D向量类,用来存储x ...

  5. 【Spring】BeanFactory解析bean详解

    在该文中来讲讲Spring框架中BeanFactory解析bean的过程,该文之前在小编原文中有发表过,要看原文的可以直接点击原文查看,先来看一个在Spring中一个基本的bean定义与使用. pac ...

  6. 老李分享：robotium常用API 2

    断言: 具体请查看官网 断言方法assert(robotium特有的断言方式,实际项目中和Junit的assert方法配合使用) void assertCurrentActivity (String ...

  7. 手机自动化测试：Appium源码分析之跟踪代码分析九

    手机自动化测试:Appium源码分析之跟踪代码分析九   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家 ...

  8. 性能调优案例分享：jvm crash的原因 2

    3.core dump分析 有了core dump文件,接下来要做的就是通过命令去解析此文件,定位具体问题了,主要有以下三个命令: (1)先执行gdb $JAVA_HOME$/bin/java cor ...

  9. /etc/postfix下 main.cf 配置文件详解

    postconf -n   #别名数据库(postalias/newaliases 命令生成) alias_database = hash:/etc/postfix/aliases   #别名表,列出 ...

  10. __init__.py

    python中的Module是比较重要的概念.常见的情况是,事先写好一个.py文 件,在另一个文件中需要import时,将事先写好的.py文件拷贝 到当前目录,或者是在sys.path中增加事先写好的 ...