最近一直在学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. AsyncResult

    private static long CalculateFolderSize(string FolderName){ return FolderName.Length;} public delega ...

  2. OA、CRM、ERP之间的区别和联系是什么？

    我们假设你是某机械行业的销售,一切从今天你收到公司的邮件,去上海参加展会开始 因为 去展会 所有 首先 你打开 OA 登陆 填写出差申请表 送交主管审批 填表--审批--行政订票酒店 然后呢 你飞去上 ...

  3. Path Sum,Path Sum II

    Path Sum Total Accepted: 81706 Total Submissions: 269391 Difficulty: Easy Given a binary tree and a ...

  4. map——映射（message.cpp）

    信息交换 (message.cpp) [题目描述] Byteland战火又起,农夫John派他的奶牛潜入敌国获取情报信息. Cow历尽千辛万苦终于将敌国的编码规则总结如下: 1 编码是由大写字母组成的 ...

  5. Android识别图片中脸部信息

    在Android开发中,大部分应用都是以用户为第一位,用户都有自己的个人中心,用来展示自己的信息,头像无疑是展示自己最直观的方式,随着各种政策的出台,实名认证,真人头像变得尤为重要,如果要求上传真人头 ...

  6. ImportError: cannot import name webdriver问题解决

    安装完selenium之后,发现根本无法使用,一运行代码,就报ImportError: cannot import name webdriver错误 于是各种FQ查找解决方法,查到方法如下: 在当前目 ...

  7. 【stm32】ADC的规则通道和注入通道混合使用

    之前完成了规则通道DMA的数据传输了,不过平时在使用ADC的时候可能就会遇到很多情况,不可能就这样简单的按规则通道来采样,DMA存储,使用数据的:可能有时候会需要立刻采样,那样我们就需要利用到注入通道 ...

  8. 让Cocos2D-X的示例程序运行起来

    没有整理好,现在先标记下 安装好环境后可能遇到的问题: 1.cocos2d-X 2.0版本后创建的Android项目提示org.cocos2dx.lib.Cocos2dxActivity找不到问题 解 ...

  9. AsyncTask加载图片

    http://blog.csdn.net/sodino/article/details/7741674 http://www.cnblogs.com/weisenz/archive/2012/04/1 ...

  10. 定义不同版本的jQuery

    <script type="text/javascript" src="/js/jquery-2.0.3.min.js"></script&g ...