首先感谢w3cfuns的老师~

今天给大家带来一个CSS3制作的翻牌效果，就是鼠标移到元素上，感觉可以看到元素背后的信息。大家如果制作考验记忆力的连连看、扑克类的游戏神马的，甚至给女朋友写一些话语，放在使用该实例制作的相册之后都可以尝试下，哈~

效果图：

实例用到的一些CSS3的新属性：

 a、-webkit-perspective: 800px;

perspective （透视，视角）：属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。决定了你所看到的是2D transform 还是3D transform 。

b、-webkit-transform-style: preserve-3d;

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。默认flat（平的），我们3D效果，然后选择3D。

c、-webkit-backface-visibility: hidden; 是否显示该选择元素旋转到背面后的样子。

d、-webkit-transform: rotateY(0);  元素绕Y轴旋转。

上面的属性先给大家一个感性的认识，看完例子再细细品味这些属性，或者baidu，google神马的。

例子：

Html:

  1. <body>
  2.  
  3. <div id="content">
  4.     <ul>
  5.         <li>
  6.             <a href="#" target="_blank">
  7.                 <div><img alt="" src="images/1.jpg"/></div>
  8.                 <div>
  9.                     <h3>漩涡鸣人</h3>
  10.  
  11.                     <p>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐，无父无母的他受尽了村人的冷眼与歧视，他下定决心要成为第六代火影，让所有人都认同他的存在。</p>
  12.                 </div>
  13.             </a>
  14.         </li>
  15.         <li>
  16.             <a href="#" target="_blank">
  17.                 <div>
  18.                     <img alt="" src="images/2.jpg"/>
  19.                 </div>
  20.                 <div>
  21.                     <h3>日向雏田</h3>
  22.  
  23.                     <p>
  24.                         日本漫画家岸本齐史作品《火影忍者》中的3号女主角。木叶忍者村的女忍者，木叶名门日向一族宗家族长的长女。喜欢漩涡鸣人，原本是个性格柔弱的女孩，但是在鸣人的影响下逐渐变得坚强，并逐渐成长为一名优秀的忍者。</p>
  25.                 </div>
  26.             </a>
  27.         </li>
  28.         <li>
  29.             <a href="#" target="_blank">
  30.                 <div><img alt="" src="images/3.jpg"/></div>
  31.                 <div>
  32.                     <h3>蒙奇·D·路飞</h3>
  33.  
  34.                     <p>蒙奇·D·路飞 是日本人气动漫 《海贼王》中的主人公。是日本人气动漫 《海贼王》中的主人公。草帽海贼团船长，梦想是找到传说中的宝藏 —— ONE PIECE，成为海贼王。</p>
  35.                 </div>
  36.             </a>
  37.         </li>
  38.         <li>
  39.             <a href="#" target="_blank">
  40.                 <div>
  41.                     <img alt="" src="images/4.jpg"/>
  42.                 </div>
  43.                 <div>
  44.                     <h3>盒子先生</h3>
  45.  
  46.                     <p>
  47.                         Danbo是一只用废纸盒DIY出来的可爱玩偶，圆圆的眼睛和三角形的嘴巴，时刻露出无辜的表情，让人看到就心软，Danbo是个纯真善良的小家伙，在它单纯的幻想世界里，总是透露出最纯真可爱的动人气息。</p>
  48.                 </div>
  49.             </a>
  50.         </li>
  51.     </ul>
  52. </div>
  53.  
  54. </body>

还是相当简单的：

ul为一组图片，每个li中有个a(因为我们希望点击图片可以跳转),a中包含两个div，一个是正常显示时的（即显示图片），一个是图片旋转后显示的（即介绍）。

CSS:

  1.  <link href="css/reset.css" rel="stylesheet" type="text/css">
  2.  
  3.     <style type="text/css">
  4.  
  5.         body
  6.         {
  7.             font-size: 14px;
  8.             font-family: Microsoft YaHei, Tahoma, Geneva, sans-serif;
  9.             background: #111;
  10.         }
  11.  
  12.         #content ul
  13.         {
  14.             width: 960px;
  15.             margin: 150px auto;
  16.             padding: 60px 0;
  17.         }
  18.  
  19.         #content ul li
  20.         {
  21.             margin-right: 20px;
  22.             width: 225px;
  23.             height: 180px;
  24.             float: left;
  25.         }
  26.  
  27.         #content ul li:last-child
  28.         {
  29.             margin-right: 0;
  30.         }
  31.  
  32.         #content ul li a
  33.         {
  34.             position: relative;
  35.             display: block;
  36.             width: 100%;
  37.             height: 100%;
  38.             /*舞台（动画元素的父容器）perspective*/
  39.             -webkit-perspective: 800px;
  40.             -moz-perspective: 800px;
  41.  
  42.         }
  43.  
  44.         #content ul li a > div
  45.         {
  46.             position: absolute;
  47.             left: 0;
  48.             height: 0;
  49.             width: 100%;
  50.             height: 100%;
  51.             color: #fff;
  52.             /*动画元素transform-style*/
  53.             -webkit-transform-style: preserve-3d;
  54.             -webkit-transition: .8s ease-in-out ;
  55.             /*动画元素背后设置为hidden*/
  56.             -webkit-backface-visibility: hidden;
  57.         }
  58.  
  59.         #content ul li a div:first-child
  60.         {
  61.             /*
  62.             绕y轴旋转
  63.             */
  64.             -webkit-transform: rotateY(0);
  65.             z-index: 2;
  66.         }
  67.  
  68.         #content ul li a div:last-child
  69.         {
  70.             background: url("images/bg.jpg") no-repeat 0 0;
  71.             -webkit-transform: rotateY(180deg);
  72.             z-index: 1;
  73.         }
  74.  
  75.         #content ul li a:hover div:first-child
  76.         {
  77.             -webkit-transform: rotateY(-180deg);
  78.         }
  79.  
  80.         #content ul li a:hover div:last-child
  81.         {
  82.             -webkit-transform: rotateY(0);
  83.         }
  84.  
  85.         #content ul li a div h3
  86.         {
  87.             margin: 0 auto 15px;
  88.             padding: 15px 0;
  89.             width: 200px;
  90.             height: 16px;
  91.             line-height: 16px;
  92.             font-size: 14px;
  93.             text-align: center;
  94.             border-bottom: 1px #fff dashed;
  95.         }
  96.  
  97.         #content ul li a div p
  98.         {
  99.             padding: 0 10px;
  100.             font-size: 12px;
  101.             text-indent: 2em;
  102.             line-height: 18px;
  103.         }
  104.  
  105.     </style>

好了，上面的CSS中就可以发现文章前面说的那些CSS属性了。

1、最主要的是理解rotateY ，绕y轴旋转，记得我在HTML5 CSS3 精美案例 ： 实现VCD包装盒个性幻灯片中也使用到类似属性 transform: rotate(2520deg);使用的是2D旋转。

rotateY字面上看绕y轴旋转，肯定有人问y轴在哪：

默认旋转元素的中心点就是旋转中心（可以通过transform-origin修改），x，y轴都在图上，z轴是从中心往外发的箭头（就是屏幕射向你头的箭头）。

我们例子中，默认图片rotateY=0;鼠标指向为rotateY=-180，负数，也就是逆时针绕y轴旋转，正数，则为顺时针；其他两个轴同理；

我们例子的核心就是鼠标指向时：图片（div:first-child），从0度绕y轴逆时针旋转180度到达-180度；介绍（div:last-child）从180度绕y轴逆时针旋转180度到达0度。造成两个一起逆时针旋转的效果。有人可能会问为啥介绍默认不是0度，这里注意下，介绍逆时针旋转180度之后是正面状态，所以当倍图片遮盖时，相当于从正常状态顺时针旋转了180度，因为鼠标指向时需要恢复正常状态。

perspective，有个技巧，对于舞台（动画的父元素）设置。

transform-style对3d变化当然是3d了，没啥好说的。

关于CSS3的3d效果相关的属性，还有很多，有机会以后的例子会刻意使用没有用过的~

欢迎大家指教~对了，该例子需要在chrome下运行，firefox貌似支持不是很好，自动用了chrome，firebug也很少用了~嘿嘿~

源码点击下载

版权声明：本文为博主原创文章，未经博主允许不得转载。

HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果的更多相关文章

  1. css3之3D翻牌效果

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

  2. 使用JS与CSS3的翻转实现3D翻牌效果

    之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果. 这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角, ...

  3. css3的3D翻牌效果

    利用hover控制动画,一个从翻面向正面翻,一个从正面向反面翻. 利用:backface-visibility: hidden;控制反面的元素不显示. 不支持的浏览器直接切换层级换图. <!DO ...

  4. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  5. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相冊

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  6. Web 开发中应用 HTML5 技术的10个实例教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...

  7. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  8. CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)

    刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...

  9. 转载 CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解

    目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果

随机推荐

  1. 面试之路（4）-TCP/IP/HTTP概述

    tcp/ip基础知识 TCP/IP全称是Transmission Control Protocol/Internet Protocol. IP地址共32位,4字节. IP地址分为两部分:网络标识和主机 ...

  2. Python可视化TVTK库初使用

    本周学习了初步的TVTK库的安装及使用方法,第一次通过tvtk.CubeSource方法建立了一个长方体对象.对TVTK的接触有了新的体会. 首先,在网上下载了以下五个库并按顺序通过pip指令在cmd ...

  3. Spring Cloud入门教程-Ribbon实现客户端负载均衡

    简介 我们继续以之前博客的代码为基础,增加Ribbon组件来提供客户端负载均衡.负载均衡是实现高并发.高性能.可伸缩服务的重要组成部分,它可以把请求分散到一个集群中不同的服务器中,以减轻每个服务器的负 ...

  4. Jsp 连接 mySQL、Oracle 数据库备忘(Windows平台)

    Jsp 环境目前最流行的是 Tomcat5.0.Tomcat5.0 自己包含一个 Web 服务器,如果是测试,就没必要把 Tomcat 与 IIS 或 Apache 集成起来.在 Tomcat 自带的 ...

  5. 使用JConsole以及VisualVM进行jvm程序的监控，排错，调优

    这里只是做一个备份,便于以后继续. 添加两个感觉好的链接吧: http://www.linuxidc.com/Linux/2015-02/113420.htm http://blog.csdn.net ...

  6. Fiddler - 工具配置及在ios抓取不了https的解决方法

    一.首先,官网下载最新版fiddler工具: https://www.telerik.com/fiddler 二.打开fiddler,点击Tools - Options 我电脑上的各项配置如下图(也可 ...

  7. HDU-5706

    GirlCat Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Problem Desc ...

  8. linux 系统centOS 7 怎么在线安装mysql

    以下操作,注意空格,为避免出错,可以选择直接copy 第一步: 输入命令行      yum list installed | grep mysql       检查是否已经安装mysql 已安装输入 ...

  9. activeMq的入门程序

    生产者 1.导入相关依赖 2.交给Spring管理,写入相关配置JmsTemplate @RunWith(SpringJUnit4ClassRunner.class) @ContextConfigur ...

  10. notepad++中双击选中字符串高亮颜色设置

    notepad++ 中最好用的功能就是双击选中,本文档中所有相同的内容高亮 不过有个问题就是当文档特别大,而且注释比较多的时候,我选中的内容高亮为绿色不太好找,那怎么设置呢? 设置--语言格式设置-- ...