使用纯CSS3 实现翻牌效果  需要注意要给子盒子使用绝对定位，这样两个盒子可以完全重合在一起，需要给父盒子一个

transform-style: preserve-3d;让子盒子翻转时保持3D效果，

perspective: 400px;可以给父盒子一个视距遵守近大远小规则可根据需要设置。
transition: all 0.3s;使用延迟效果更好观察动画

当鼠标放上时就会旋转

以下代码直接复制即可使用。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>Document</title>

     <style>

         .card {

             position: relative;

             transform-style: preserve-3d;

             float: left;

             perspective: 400px;

             perspective: 180px;

             width: 150px;

             height: 150px;

             margin: 100px 20px;

             transition: all 0.3s;

         }

         .card:hover {

             transform: rotateY(-180deg);

         }

         .cover,

         .back {

             position: absolute;

             width: 100%;

             height: 100%;

             border-radius: 50%;

             font-size: 25px;

             text-align: center;

             line-height: 150px;

         }

         .cover {

             background-color: purple;

             transform: rotateY(180deg);

         }

         .back {

             z-index:;

             background-color: pink;

         }

     </style>

 </head>

 <body>

     <div class="card">

         <div class="cover">1号正面</div>

         <div class="back">1号反面</div>

     </div>

     <div class="card">

         <div class="cover">2号正面</div>

         <div class="back">2号反面</div>

     </div>

     <div class="card">

         <div class="cover">3号正面</div>

         <div class="back">3号反面</div>

     </div>

     <div class="card">

         <div class="cover">4号正面</div>

         <div class="back">4号反面</div>

     </div>

 </body>

 </html>

web CSS3 实现3D动态翻牌效果的更多相关文章

  1. 9种纯CSS3人物信息卡片动态展示效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  3. 使用CSS3实现3D图片滑块效果

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  4. 使用 CSS3 实现 3D 图片滑块效果

    Slicebox – A fresh 3D image slider with graceful fallback 英文原文地址:http://tympanus.NET/codrops/2011/09 ...

  5. css3实现3D立体翻转效果

    1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...

  6. web CSS3 实现3D旋转木马

    3D 旋转木马是CSS中常见的特效之一,旋转木马可以有多种方法实现,这里我使用纯CSS实现这种动画的效果. 简要介绍一下重点 transform: rotateY(60deg) translateZ( ...

  7. CSS3特效----图片动态提示效果

    需掌握的知识点: 1.掌握两个HTML5新标签figure以及figcaption的用法 2.掌握transform的属性特点,并能熟练运用 3.学会通过transition及transform配合, ...

  8. Web 开发中很实用的效果【源码下载】

    网页特效下载 引用地址:http://www.yyyweb.com/350.html 超炫的页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应 ...

  9. css3之3D翻牌效果

      最近一直在学css3,发现他真的是越来越牛逼.现在的css3已经不在是以前的css了,它能做出的功能效果是我们没法想象的了.它可以实现flash,可以制作一些js能做出来的效果,还可以写出ps做出 ...

随机推荐

  1. .Net Core微服务入门全纪录（二）——Consul-服务注册与发现（上）

    前言 上一篇[.Net Core微服务入门全纪录(一)--项目搭建]讲到要做到服务的灵活伸缩,那么需要有一种机制来实现它,这个机制就是服务注册与发现.当然这也并不是必要的,如果你的服务实例很少,并且很 ...

  2. MAC地址表、ARP缓存表、路由表及交换机、路由器基本原理

    在网上找到了这篇讲述MAC地址,ARP协议和路由表的文章,如获至宝.一篇文章把组网中的相关概念讲的明明白白. 原文是发布在51cto博客上,但不知道为什么点进去却是404.让我没想到的是这个技术论坛上 ...

  3. LeetCode 78，面试常用小技巧，通过二进制获得所有子集

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题第47篇文章,我们一起来看下LeetCode的第78题Subsets(子集). 这题的官方难度是Medium,点赞 ...

  4. DOCLever环境搭建

    简介 DOClever是一个可视化免费开源的接口管理工具 ,可以分析接口结构,校验接口正确性, 围绕接口定义文档,通过一系列自动化工具提升我们的协作效率. 环境搭建 准备: node: 官方下载:ht ...

  5. JavaSE的基本语法

    JavaSE基本语法 一.语法的注意事项 1.严格区分大小写 2.每句命令结尾使用分号 3.符号都是英文状态 4.括号.引号都是成对出现的! 5.注意缩进 Tips: 文件名和类名可以不一致,但pub ...

  6. cino伟斯 A770键盘界面快速设定记录后缀删除添加换行回车操作方法

    http://www.cinoscan.com/upload/2016063033256485.pdf cino A770键盘界面快速设定记录后缀删除添加换行回车操作方法

  7. 本地代码提交到远程仓库（git）

    [准备环境] 我没有在Linux搭建gitlab私有云服务器,用的是开源的 gitee托管平台 1.在gitee注册账号 2.本地下载git客户端 [步骤] 1  本地新建1个文件夹  进入文件夹后 ...

  8. 在Java虚拟机上班是一种怎样的体验？

    228 人赞同了该回答 利益相关,匿了! JVM公司里面线程众多,派系林立,尤其是执行引擎那波人,因为是核心部门,经常diss别的部门. 428 人赞同了该回答 不请自来. 其实在JVM工作没有你们想 ...

  9. JavaWeb网上图书商城完整项目--day02-15.登录功能流程分析

    当用户点击登录界面的登录按钮的时候,将登录的用户名.密码和验证码上传到后台,后台的业务流程如下面所示:

  10. Jmeter系列（30）- 详解 JDBC Request

    如果你想从头学习Jmeter,可以看看这个系列的文章哦 https://www.cnblogs.com/poloyy/category/1746599.html 前言 JDBC Request 主要是 ...