使用纯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. [LOJ6569] 仙人掌计数

    Statement 带标号仙人掌计数问题. \(n< 131072\). Solution 设\(x\)个点的仙人掌个数的生成函数为\(C(x)\) 对于与根相邻的块, 还是仙人掌, 生成函数为 ...

  2. Dos命令提示符下 - 用sqlcmd执行*.sql语句

    Dos命令提示符下 - 用sqlcmd执行*.sql语句 1)在Dos命令下执行sqlcmd命令(当然事先需要将sqlcmd增加到环境变量中去), 2)下面白色部分替换为服务器名或计算机名即可sqlc ...

  3. NAT网络地址转化和DHCP

    DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)通常被应用在大型的局域网络环境中,主要作用是集中的管理.分配IP地址,使网络环境中的主机动态的获得I ...

  4. redis缓存使用SpringDataRedis

    1. SpringDataRedis简介 1.1项目常见问题思考 我们目前的系统已经实现了广告后台管理和广告前台展示,但是对于首页每天有大量的人访问,对数据库造成很大的访问压力,甚至是瘫痪.那如何解决 ...

  5. SLAM:使用EVO测评ORBSLAM2

    SLAM:使用EVO测评ORBSLAM2 EVO是用来评估SLAM系统测量数据以及输出估计优劣的Python工具,详细说明请参照: https://github.com/MichaelGrupp/ev ...

  6. 利用salt stack pillar安装多组keepalived

    利用salt stack pillar安装多组keepalived 环境描述 在生产环境中,需要搭建三套keepalived环境,3个master和3个backup,要安装的软件和配置文件,虽然不是很 ...

  7. OpenResty入门之使用Lua开发Nginx插件

    记住一点:nginx配置文件很多坑来源自你的空格少了或多了. OpenResty OpenResty 是一个基于 Nginx 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库.第 ...

  8. 用VMware克隆CentOS 6.5如何进行网络设置

    我们使用虚拟机的克隆工具克隆出了一个电脑,电脑连接采用nat方式 111电脑对于的ip地址设置如下 [root@localhost ~]# cd /etc/sysconfig/network-scri ...

  9. ImageLoader在Gridview中的使用

    原理和ImageLoader在Listview中的使用一样,只有下面的几点变化 主页面的布局 <?xml version="1.0" encoding="utf-8 ...

  10. python实现简单的SVM

    # -*- coding: utf-8 -*- from sklearn.svm import SVC import numpy as np print(X.shape,Y.shape) X = np ...