最近一直在学css3，发现他真的是越来越牛逼。现在的css3已经不在是以前的css了，它能做出的功能效果是我们没法想象的了。它可以实现flash，可以制作一些js能做出来的效果,还可以写出ps做出来的一些渐变啊圆角啊阴影啊什么的效果，如此之炫的它，我相信已经有很多人对它做了更深的研究了吧，哈哈，今天我也在小小的研究了下它，主要是关于它的一些3d效果，对于3d本人一直都不是不清不楚的，今天有时间就刚好好好学习下，~~~

所谓的3d翻牌效果，其实就是两张图片，一张在前，一张在后，当前面的那张发生旋转后，转到一定角度时后面的图片就会跟着它的步伐一起旋转，只是一个旋转到看不见，而一个刚要转的我们看的见。是不是很心急，那就快来跟我一起学习吧，哈哈~@@@

首先，我们在html中有这样一个布局：

<div class="outer">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

不要小看外面那个div，它可是本次内容不可少的呢，没了它，后面的效果就没法实现了呢!局布好了，接下来就要开始搞样式了。最先要搞的肯定是外面的哈，给它一个width,height,大少各位大神自己定吧，小妹我这就先给它定个200*200吧。外面的搞定了，里面的也要开始了，这里都是给200*200。此时在浏览器中一看发现div1和div2是上下显示的，一个上一个下，这就对了，要知道div是块元素，它要占据一整行的呢，但这对我们之前说的前后肯定是有矛盾的，不要急，给它一个绝对定位position: absolute;这样两个div的中心就重合啦。为了区别两个div,这里我们要分别给它们不一样的背景色。前期准备工作都差不搞定了，接下来我们来看看怎么样实现效果吧！

我们是要实现翻牌效果，一听就知道肯定是要有旋转的，这就要用到css3里的新属性transform:rotateY(?deg);有人有可能会问为什么是rotateY呢，这你就不知道了吧，翻牌，当然是沿着Y轴转啊，哈哈！所以当鼠标移到div上时我们就要让它实现旋转效果，那么此时外层div的用处就来啦，不管用哪个小div都无法让它们同时发生旋转，除非我们的鼠标是点在外面那个div上，于是就有这个代码了，

.outer:hover .div1{
            transform:rotateY(-180deg);
        }
        .outer:hover .div2{
            transform:rotateY(0deg);
        }

旋转是有了，可是没有任何过渡效果的旋转看起来是很难看的，所以在这里，我们要给它们一个过渡效果，就要用到css3里的新属性transition:all 2s;此处的all是它所有的效果都过渡。讲到这里我们其实一直都没处理一件事，那就是怎么让当前面的旋转到后面，后面的紧跟其后出现， 这就是backface-visibility:hidden;一个在图片变换里很重要的一个属性，它的意思是当图片转到显示屏看不见的地方就消失了。就是说本来是正面的， 我们能看么到，但是当它沿着Y轴转180度后我们就不能看到它了，如果不加这个属性我们是能看到旋转后的反图片的，加了它就看不到了。所以我们要把这个属性加到两个小div上。而且为了实现此效果，我们在开始的时候还得让两个小div一个没有旋转，我们能看到，另一个也就是在背后的那个放转180度，这样当第一个div 开始旋转后我们就不会立即看到第二个div，而是等它旋转到看不到的地方，第二个div 才会出现。具体代码如下所示：

<html>

<head>

    <title>3D翻牌效果 </title>

    <meta charset="UTF-8">

    <script type="text/javascript" src="jquery.js"></script>

    <style type="text/css">

        .outer{

            width: 510px;

            height: 340px;

            border: 1px red solid;

            margin: 0 auto;

        }

        .outer div{

            width:510px;

            height: 340px;

            position: absolute;

            transform-style: preserve-3d;

            backface-visibility:hidden;

            transition:all 2s;

        }

        .div1{

            background: url("images/1.jpg");

            transform:rotateY(0);

        }

        .div2{

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

            transform:rotateY(-180deg);

        }

        .outer:hover .div1{

            transform:rotateY(-180deg);

        }

        .outer:hover .div2{

            transform:rotateY(0deg);

        }

    </style>

</head>

<body>

<div class="outer">

    <div class="div1"></div>

    <div class="div2"></div>

</div>

</body>

</html>

css3之3D翻牌效果的更多相关文章

  1. css3的3D翻牌效果

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

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

    首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...

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

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

  4. HTML5和CSS3实现3D转换效果 CSS3的3D效果

    上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...

  5. 简单几步用纯CSS3实现3D翻转效果

    作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...

  6. CSS3之3D立方体效果

    下面代码可实现3D立方体,比较好理解,就是让每个面先平移到指定位置,然后旋转90度 <!DOCTYPE html> <html lang="en"> < ...

  7. CSS3 实现3D旋转木马效果

    基本原理: 1.首先我们需要让图片能旋转的效果,我们让所有图片绝对定位(position:absolute),共用一个中心点. 2.对于舞台我们加一个视距,比如下面的demo是 perspective ...

  8. Html5+css3实现3D转动效果

    由于最近一直在忙着筹划去上海工作的事情,所以博客更新的速度也就慢了下来.前几天面试了几家公司,也拿到几份offer,总结了一些面试中遇到的问题,最近整理一下会和大家一起分享.今天呢,就和大家分享一下前 ...

  9. css3图片3D翻转效果

    点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...

随机推荐

  1. Sql Server获得每个表的行数

    SELECT o.[name], ddps.[row_count] FROM sys.indexes AS i INNER JOIN sys.objects AS o ON i.[object_id] ...

  2. Floyd算法(弗洛伊德算法)

    算法描述: Floyd算法又称为弗洛伊德算法,插点法,是一种用于寻找给定的加权图中顶点间最短路径的算法.从图的带权邻接矩阵A=[a(i,j)] n×n开始,递归地进行n次更新,即由矩阵D(0)=A,按 ...

  3. Java并发编程之闭锁简介

    闭锁相当于一扇门,在闭锁到达结束状态之前,这扇门一直是关闭着的,没有任何线程可以通过,当到达结束状态时,这扇门才会打开并容许所有线程通过.它可以使一个或多个线程等待一组事件发生.闭锁状态包括一个计数器 ...

  4. C# sliverlight调用WCF服务出现的一个错误

    错误提示如下: 尝试向 URI“http://localhost:8396/Service1.svc”发出请求时出错.这可能是由于试图以跨域方式访问服务而又没有正确的跨域策略,或策略不适用于 SOAP ...

  5. Piggy-Bank （hdoj1114）

    Piggy-Bank Problem Description Before ACM can do anything, a budget must be prepared and the necessa ...

  6. mysqlbinlog 读取多个文件

    [root@zjzc01 binlog]# mysqlbinlog --start-datetime='2016-02-25 00:00:00' --stop-datetime='2016-03-15 ...

  7. （十一）boost库之多线程间通信

    (十一)boost库之多线程间通信 1.互斥锁 在编程中,引入了对象互斥锁的概念,来保证共享数据操作的完整性.每个对象都对应于一个可称为" 互斥锁" 的标记,这个标记用来保证在任一 ...

  8. C++类对应的内存结构

    提示1:对“内存结构”表示有疑问或不解的,先参考: http://blog.csdn.net/guogangj/archive/2007/05/25/1625199.aspx, 本文使用的表示方法和V ...

  9. 关于select

    select 1与select * 的区别:“selelct 常量 from 表名” 对应所有行,返回的永远只有一个值,即常量 ,所以一般只用来判断是否有表记录:而“select * from 表名” ...

  10. 移动端页面SEO优化需要注意的10个要点

    如今,移动互联网已经成为互联网组成的非常重要的一个分支,如果说以前对移动页面没有很规范的优化和高质量内容评判划分标准,但现在随着各大搜索引擎发布了移动建站指南,图文并茂的描述了如何提高移动站在百度质量 ...