最近一直在学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. CentOS 7 U盘安装解决找不到U盘问题

    在使用U盘进入CentOS7系统安装选项时,按下Tab键,在屏幕下方出现:vmlinuz initrd=initrd.img inst.stage2=hd:LABEL=CentOS\x207\x20x ...

  2. 单链表（Single Linked List）

    链表的结点结构  ┌───┬───┐  │data|next│  └───┴───┘ data域--存放结点值的数据域 next域--存放结点的直接后继的地址(位置)的指针域(链域) 实例:从终端输入 ...

  3. C语言undefined behaviour未定义行为

    C语言中的未定义行为(Undefined Behavior)是指C语言标准未做规定的行为.同时,标准也从没要求编译器判断未定义行为,所以这些行为有编译器自行处理,在不同的编译器可能会产生不同的结果,又 ...

  4. uva 123 Searching Quickly

     Searching Quickly  Background Searching and sorting are part of the theory and practice of computer ...

  5. Log4j.properties配置详细解读

    Log4j.properties配置 Log4j有三个主要的组件:Loggers(记录器),Appenders  (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以 ...

  6. My97DatePicker使用的问题

    我在iframe中使用My97DatePicker时,发现第一次点击左边的菜单时,在右边的页面可以弹出日期框: 当我第二次点击菜单时,右边的日期文本框却弹出了页面的内容,而不是日期选择框: 首先怀疑是 ...

  7. android studio error configuration with name default not found

    Android Studio报错: android studio error configuration with name default not found 在进行sync的时候,提示Error: ...

  8. ORACLE CHECK CONSTRAINT使用示例（转载） .

    看下面的例子: CREATE TABLE temp (age NUMBER(3)); ALTER TABLE temp ADD CONSTRAINT ck_temp_age CHECK     ((A ...

  9. linux删除、移动、拷贝时，加-f仍然会提示的解决办法

    cp -f 还是提示 root# alias 可以看到,执行cp就等于执行了cp -i,-i是确认提示 alias cp='cp -i' root# vi ~/.bashrc 修改完毕Esc, :wq ...

  10. python运维开发(十一)----python操作缓存memcache、redis

    内容目录: 缓存 memcache redis memcache Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数 ...