HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果

首先感谢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:

<body>

<div id="content">

    <ul>

        <li>

            <a href="#" target="_blank">

                <div><img alt="" src="images/1.jpg"/></div>

                <div>

                    <h3>漩涡鸣人</h3>

                    <p>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐，无父无母的他受尽了村人的冷眼与歧视，他下定决心要成为第六代火影，让所有人都认同他的存在。</p>

                </div>

            </a>

        </li>

        <li>

            <a href="#" target="_blank">

                <div>

                    <img alt="" src="images/2.jpg"/>

                </div>

                <div>

                    <h3>日向雏田</h3>

                    <p>

                        日本漫画家岸本齐史作品《火影忍者》中的3号女主角。木叶忍者村的女忍者，木叶名门日向一族宗家族长的长女。喜欢漩涡鸣人，原本是个性格柔弱的女孩，但是在鸣人的影响下逐渐变得坚强，并逐渐成长为一名优秀的忍者。</p>

                </div>

            </a>

        </li>

        <li>

            <a href="#" target="_blank">

                <div><img alt="" src="images/3.jpg"/></div>

                <div>

                    <h3>蒙奇·D·路飞</h3>

                    <p>蒙奇·D·路飞 是日本人气动漫 《海贼王》中的主人公。是日本人气动漫 《海贼王》中的主人公。草帽海贼团船长，梦想是找到传说中的宝藏 —— ONE PIECE，成为海贼王。</p>

                </div>

            </a>

        </li>

        <li>

            <a href="#" target="_blank">

                <div>

                    <img alt="" src="images/4.jpg"/>

                </div>

                <div>

                    <h3>盒子先生</h3>

                    <p>

                        Danbo是一只用废纸盒DIY出来的可爱玩偶，圆圆的眼睛和三角形的嘴巴，时刻露出无辜的表情，让人看到就心软，Danbo是个纯真善良的小家伙，在它单纯的幻想世界里，总是透露出最纯真可爱的动人气息。</p>

                </div>

            </a>

        </li>

    </ul>

</div>

</body>

还是相当简单的：

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

CSS:

 <link href="css/reset.css" rel="stylesheet" type="text/css">

    <style type="text/css">

        body

        {

            font-size: 14px;

            font-family: Microsoft YaHei, Tahoma, Geneva, sans-serif;

            background: #111;

        }

        #content ul

        {

            width: 960px;

            margin: 150px auto;

            padding: 60px 0;

        }

        #content ul li

        {

            margin-right: 20px;

            width: 225px;

            height: 180px;

            float: left;

        }

        #content ul li:last-child

        {

            margin-right: 0;

        }

        #content ul li a

        {

            position: relative;

            display: block;

            width: 100%;

            height: 100%;

            /*舞台（动画元素的父容器）perspective*/

            -webkit-perspective: 800px;

            -moz-perspective: 800px;

        }

        #content ul li a > div

        {

            position: absolute;

            left: 0;

            height: 0;

            width: 100%;

            height: 100%;

            color: #fff;

            /*动画元素transform-style*/

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

            -webkit-transition: .8s ease-in-out ;

            /*动画元素背后设置为hidden*/

            -webkit-backface-visibility: hidden;

        }

        #content ul li a div:first-child

        {

            /*

            绕y轴旋转

            */

            -webkit-transform: rotateY(0);

            z-index: 2;

        }

        #content ul li a div:last-child

        {

            background: url("images/bg.jpg") no-repeat 0 0;

            -webkit-transform: rotateY(180deg);

            z-index: 1;

        }

        #content ul li a:hover div:first-child

        {

            -webkit-transform: rotateY(-180deg);

        }

        #content ul li a:hover div:last-child

        {

            -webkit-transform: rotateY(0);

        }

        #content ul li a div h3

        {

            margin: 0 auto 15px;

            padding: 15px 0;

            width: 200px;

            height: 16px;

            line-height: 16px;

            font-size: 14px;

            text-align: center;

            border-bottom: 1px #fff dashed;

        }

        #content ul li a div p

        {

            padding: 0 10px;

            font-size: 12px;

            text-indent: 2em;

            line-height: 18px;

        }

    </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翻牌效果的更多相关文章

css3之3D翻牌效果
最近一直在学css3,发现他真的是越来越牛逼.现在的css3已经不在是以前的css了,它能做出的功能效果是我们没法想象的了.它可以实现flash,可以制作一些js能做出来的效果,还可以写出ps做出 ...
使用JS与CSS3的翻转实现3D翻牌效果
之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果. 这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角, ...
css3的3D翻牌效果
利用hover控制动画,一个从翻面向正面翻,一个从正面向反面翻. 利用:backface-visibility: hidden;控制反面的元素不显示. 不支持的浏览器直接切换层级换图. <!DO ...
HTML5 CSS3 专题：诱人的实例 3D旋转木马效果相册
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
HTML5 CSS3 专题：诱人的实例 3D旋转木马效果相冊
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
Web 开发中应用 HTML5 技术的10个实例教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
CSS3 3D立方体效果－transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)
刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...
转载 CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解
目标大纲文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果

随机推荐

DB Query Analyzer 5.03 is distributed, EXCEL table name will be enclosed in square bracket
DB Query Analyzer 5.03 is distributed, table name will be enclosed in square bracket automatically ...
mq常用命令
IBM MQ常用命令常用命令创建队列管理器crtmqm –q QMgrName-q是指创建缺省的队列管理器删除队列管理器dltmqm QmgrName启动队列管理器strmqm QmgrNam ...
管理xcode插件
1.打开终端 2.输入 open ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-ins 3.出现 4.想删除那个就随意吧 ...
Maximum Subarray(最大子数组)
Find the contiguous subarray within an array (containing at least one number) which has the largest ...
信息化建设中的IT规划精要
IT规划在信息化建设中发挥着"定位"和"导航"的作用,IT规划理论方法更是博大精深,细细讲来,会成为IT版本的"一千零一夜".因此,本文以& ...
java keytool
1.tomcat 配置Https,server.xml <Connector protocol="org.apache.coyote.http11.Http11Protocol&quo ...
Java框架数据库连接池比较 [转贴 2010-3-20 9:57:51]
现在常用的开源数据连接池主要有c3p0,dbcp和proxool三种,其中: ¨hibernate开发组推荐使用c3p0; ¨spring开发组推荐使用dbcp (dbcp连接池有weblogic连接 ...
NIO 多线程
本文可看成是对Doug Lea Scalable IO in Java一文的翻译. 当前分布式计算 Web Services盛行天下,这些网络服务的底层都离不开对socket的操作.他们都有一个共同的 ...
MySQL基本sql语句
MySQL基本操作语句操作文件夹(库) 增加create database 库名 charset utf8;charset utf8是指定库的字符编码删除drop database 库名删除某个数据 ...
利用XShell上传、下载文件（使用sz与rz命令），超实用！
借助XShell,使用linux命令sz可以很方便的将服务器上的文件下载到本地,使用rz命令则是把本地文件上传到服务器. 其中,对于sz和rz的理解与记忆我用了如下的方法(很多时候容易搞混): sz中 ...

HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

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

随机推荐

热门专题

HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果

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