最近一直在学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. pl sql练习（2）

    1.尽可能了解oracle的功能,因为很多业务逻辑oracle已经为我们做了,比如oracle已经预定义了大量的异常代码,我们不必要写自己的异常而增加代码的复杂度. 例如oracle定义了当找不到符合 ...

  2. Android中Menu的基本用法

    一. 使用xml定义Menu 菜单资源文件必须放在res/menu目录中.菜单资源文件必须使用<menu>标签作为根节点.除了<menu>标签外,还有另外两个标签用于设置菜单项 ...

  3. HDU 1073 - Online Judge

    模拟评测机判断答案 先判断有没有不一样的 有的话再提取出 有效子列 看看有没有错的 #include <iostream> #include <cstdio> #include ...

  4. 在Yii框架中使用PHPExcel

    PHPExcel是一个比较好用的php读取excel文件的类库,今天遇到了在yii中如何加载PHPExcel类文件的问题,因为Yii的autoload机制是安装类名去找文件,即文件名就是相应的类名,而 ...

  5. PNG图片小结

    PNG: 便携式网络图形(Portable Network Graphics,PNG)是一种无损压缩的位图图形格式,支持索引.灰度.RGB三种颜色方案以及Alpha通道等特性.PNG的开发目标是改善并 ...

  6. maven+springmvc+easyui+fastjson+pagehelper

    1.maven配置 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  7. （2012年旧文）纪念史蒂夫乔布斯---IT界的普罗米修斯

    谈苹果与乔布斯系列一  IT界的普罗米修斯 纪念PC界的先驱 史蒂夫乔布斯 2012-4-5 清明节,纪念IT时代的开创人—伟大的史蒂夫 乔布斯. 没有乔布斯,计算机还是属于一群科技人士的工具,没有漂 ...

  8. 使用StackTrace堆栈跟踪记录详细日志（可获取行号）

    上一篇我们提到使用.NET自带的TraceSource实现简单的日志,具体请看<轻松背后的N+疲惫——系统日志>,这一篇注意想讲的是日志的详细记录,包含请求开始到结束的过程中调用的方法链以 ...

  9. Oracle EBS-SQL (INV-6):检查监督帐户别名处理.sql

    select MSI.SEGMENT1                                 项目编码,       MSI.DESCRIPTION                      ...

  10. 为TL-WR720N编译带mentohust和njit-client的openwrt固件

    openwrt的trunk版已经支持720N了.简单好多. 首先下载openwrt源码,我下的是trunk版 svn co svn://svn.openwrt.org/openwrt/trunk/ 然 ...