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

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

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. Linux云自动化运维第二课

    一.Linux系统结构 1.Linux是一个倒树结构.Linux中所有的东西都是文件.这些文件都在系统的顶级目录中"/","/"是根目录."/&quo ...

  2. 设置iPhone网页固定到桌面上的图标

    <!--IOS Icon--> <link rel="apple-touch-icon-precomposed" href="@Url.Content( ...

  3. Ubuntu14.04下搜狗输入法的安装及配置

    在搜狗官网上下载相应的版本32/64 搜狗网址:http://pinyin.sogou.com/linux/?r=pinyin 在文件夹中找到下载的搜狗输入法文件(默认位置是Downloads),双击 ...

  4. javascript面向对象(一)

    javascript是弱类型,直译式的面相对象编程语言. 在之前我们说过 var a = 123: 在这里a是整数 但是我们可以给a重新复制为 a="你好"; 在这个过程中变量a ...

  5. UIImageView帧动画相关属性和方法

    @property(nonatomic,copy) NSArray *animationImages; 需要播放的序列帧图片数组(里面都是UIImage对象,会按顺序显示里面的图片) @propert ...

  6. moment倒计时插件

    https://github.com/icambron/moment-countdown

  7. 将spring cloud打包docker镜像

    简介:用spring cloud构建微服务后,微服务肯定要docker镜像化然后用rancher等可视化工具管理,这就是走完了一套基本的流程,现在简单介绍下 环境:两台centos7.x的服务器,一台 ...

  8. Unity 3D Framework Designing(5)——ViewModel之间如何共享数据

    对于客户端应用程序而言,单页应用程序(Single Page Application)是最常见的表现形式.有经验的开发人员往往会把一个View分解多个SubView.那么,如何在多个SubView之间 ...

  9. lucene原理及源码解析--核心类

    马云说:大家还没搞清PC时代的时候,移动互联网来了,还没搞清移动互联网的时候,大数据时代来了. 然而,我看到的是:在PC时代搞PC的,移动互联网时代搞移动互联网的,大数据时代搞大数据的,都是同一伙儿人 ...

  10. Quartz.NET总结（六）了解Jobs 和 Triggers

    前面讲了一些Quartz.net 的一些东西, http://www.cnblogs.com/zhangweizhong/category/771057.html 但是发现有一些基础的东西,没有说到. ...