使用纯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. Java—— 一点关于String的转换

    在Java学习中,恐怕我们遇到的最多的就是有关String与其他类型的转换了,我们来看一张图: 我们看到对于8种基本数据类型,除去byte和short类型没有外,其他的都有,值得注意的是可以把char ...

  2. Python爬虫小白入门（一）入门介绍

    一.前言 你是不是在为想收集数据而不知道如何收集而着急? 你是不是在为想学习爬虫而找不到一个专门为小白写的教程而烦恼? Bingo! 你没有看错,这就是专门面向小白学习爬虫而写的!我会采用实例的方式, ...

  3. 用字典优化过长的if 语句

    如果代码中,if 语句,后面elif 过多,完全可以用字典来优化代码. def response(method): if method == "POST": return &quo ...

  4. 从mysql数据库中查询最新的一条数据的方法

    第一种方法 SELECT * from a where id = (SELECT max(id) FROM a); 第二种方法: select * FROM 表名 ORDER BY id DESC L ...

  5. python基础--函数全解析

    函数(重点) (1)初始函数 在认识函数之前,我们先做如下的需求: 让你打印10次"我爱中国,我爱祖国".我们在接触函数之前是这样写的. print('我爱中国,我爱祖国') pr ...

  6. C/C++以及Linux文件操作备忘录

    目录 C文件操作 文件开关 文件读写 C++文件操作 Linux文件操作 打开 C文件操作 #include<stdio.h> stdin, stdout, stderr 文件开关 /* ...

  7. springcloud2.0 添加配置中心遇到的坑

    新手入门,在springcloud 配置config的时候遇到了几个比较烦的坑 先说1.5x版本的一些配置吧 首先是端点暴露的方式 management: security: enabled: fal ...

  8. vue开发搭建（npm安装 + vue脚手架安装）

    一.概念 1.npm:  Nodejs下的包管理器. 2.webpack: 它主要的用途是通过CommonJS的语法,把所有浏览器端需要发布的静态资源,做相应的准备,比如资源的合并和打包. 3.vue ...

  9. skywalking7 源码解析 (3) ：agent启动服务分析以及性能影响

    skywalking必看的文章,转载自https://blog.csdn.net/u010928589/article/details/106608864/

  10. Spring Boot 整合 Apollo

    简介 Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置管理场景 ...