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

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

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. docker工作流程

    Docker提供一种方法在容器中运行安全隔离的应用程序,应用程序与所有依赖项和库一起打包在容器中.因为你的应用程序总是可以使用它在构建镜像中期望的环境运行,测试和部署比以往任何时候都更简单,因为你的构 ...

  2. 配置Windows Server 2012服务器远程连接支持多人同时登陆

    1.运行输入gpedit.msc 进入组策略 2.计算机配置--管理模版--windows组件--远程桌面服务--远程桌面会话主机--连接 3.找到限制连接的数量,启用,并改为100. 4.找到 将远 ...

  3. 实用 .htaccess 用法大全

    这里收集的是各种实用的 .htaccess 代码片段,你能想到的用法几乎全在这里. 免责声明: 虽然将这些代码片段直接拷贝到你的 .htaccess 文件里,绝大多数情况下都是好用的,但也有极个别情况 ...

  4. java学习笔记 --- 异常

    异常 (1)程序出现的不正常的情况. (2)异常的体系   Throwable    |--Error  错误,严重问题,我们不处理.    ·    |--Exception 异常     |--R ...

  5. letter-spacing+first-letter实现按钮文字隐藏

    本文地址:http://www.zhangxinxu.com/wordpress/?p=3557 一.文不在长,有货则灵 图片式按钮的文字隐藏看来是大家都比较关注的一个问题(分享讨论.微博转发等可见一 ...

  6. Activity猫的一生-故事讲解Activity生命周期

    大家好,关于Android中Activity的生命周期,网上大多数文章基本都是直接贴图.翻译API,比较笼统含糊不清. 我就用故事来说一说: 有个人叫User,TA养了几只猫,有只猫叫Activity ...

  7. React Native 可以走多远?

    对于大多数APP开发者来说,能够同时开发出Android APP和IOS APP是不是很牛逼,可是它也不是天方夜谭,自从有了一个叫React Native的东西的出现,这一切就变得可以实现了. 那么到 ...

  8. unity插件开发——MenuItem

    有unity中的菜单栏是我们经常使用到的地方,如下图: MenuItem的作用就是增加一个自己的菜单 使用方法: 在工程中Assets目录下任意一个Editor目录(以后简称Editor目录,如果不存 ...

  9. 初窥DB2之insert语句

    第一种写法 INSERT INTO PERSVALUES (12, 'Harris', 20, 'Sales', 5, 18000, 1000, '1950-1-1') 第二种写法 INSERT IN ...

  10. Java面向对象核心技能

    1.封装 封装是面向对象的三大特性之一,就是将类的状态信息隐藏在类内部,不允许外部程序直接访问,而通过该类提供的方法来实现对隐藏信息的操作和访问. 封装的好处:隐藏类的实现细节:让使用者只能通过程序规 ...