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

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

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. windows phone 8.1开发：socket通信聊天

    本例用WPF程序做服务器端,windows phone程序做客户端.我们使用基于UDP协议的Socket通信.更多关于socket信息请查看:http://msdn.microsoft.com/zh- ...

  2. CSS3的新特性

    CSS3中增加的新特性: (1)选择器的种类 (2)字体 font (3)text-overflow (4)文本渲染 text-decoration (5)多列布局 column-count (6)R ...

  3. [原创]HBase学习笔记（3）- Java程序访问HBase

    这里介绍使用java api来访问和操作HBase,例如create.delete.select.update等操作. 1.HBase配置 配置HBase使用的zookeeper集群地址和端口. pr ...

  4. java 接口默认修饰符问题

    package test; public interface InterfaceTest { void todo();} /** * 以下是反编译的内容,接口里的方法默认都是public的.abstr ...

  5. C++ Primer 5 CH6 函数

    6.1 函数基础 函数包括:返回类型.函数名字.形参.函数体. 通过 "调用运算符"(一对圆括号)来执行函数,它作用于一个表达式,该表达式是函数或者指向函数的指针. 函数调用完成两 ...

  6. 更全面的聊聊PRINCE2是什么

    1 什么是PRINCE2®? PRINCE2是一个非专有方法,已在全世界超过150个国家广泛使用,采用它的组织正在与日俱增. 它被广泛认为是项目管理的领先方法,超过2万个组织已经从其开创性的可信方法中 ...

  7. Linux 搭建svn版本库

    一.安装svn服务器端yum install subversion      从镜像下载安装svn服务器端 如果后面执行“svnadmin create /usr/local/svn/sunny”提示 ...

  8. nodejs oj在线笔试应对方案(讲几种输入处理方法)

    最近参加了一些线上笔试.但是...我不是学计算机的,只会js不会c++,java,c(好吧都学过,不过忘了).可怕的是我也没学过nodejs,怎么 办,怎么办.node不就是用的js吗?所以只用学会标 ...

  9. hive metastore Server 出现异常

    报错信息: 常见问题分析: 1 hive metastore 数据库中用户名或者密码出现更改,并且重启了hive,导致生效但是CDH下没有及时更改hive metastore设置密码 2 Mysql ...

  10. C语言常见错误笔记

    1. 职业化的程序员起码要具备两点: 1)基本的软件技能 2)不犯低级的错误 2. 修改函数的形参是没用的,函数本身占用的存储单元在堆栈中分配,入口参数的值会在函数入口处拷贝到堆栈中,一旦函数返回,其 ...