登录  /  注册
首页 > web前端 > css教程 > 正文

实例详解css3特效之3D翻牌效果

php中文网
发布: 2016-05-16 12:03:25
转载
5061人浏览过

这篇文章主要介绍了css3特效之3d翻牌效果,有一定 的参考价值,感兴趣的小伙伴可以参考一下,希望对你有所帮助!

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

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

首先,我们在html中有这样一个布局:

<p class="outer">
    <p class="p1"></p>
    <p class="p2"></p>
</p>
登录后复制

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

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

.outer:hover .p1{
            transform:rotateY(-180deg);
        }
        .outer:hover .p2{
            transform:rotateY(0deg);
        }
登录后复制

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

<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 p{
           width:510px;
            height: 340px;
            position: absolute;
              transform-style: preserve-3d;
             backface-visibility:hidden;
            transition:all 2s;
        }
        .p1{
           background: url("images/1.jpg");
            transform:rotateY(0);
        }
        .p2{
            background: url("images/2.jpg") no-repeat;
            transform:rotateY(-180deg);
        }
        .outer:hover .p1{
            transform:rotateY(-180deg);
        }
        .outer:hover .p2{
           transform:rotateY(0deg);
        }
    </style></head><body><p class="outer">
    <p class="p1"></p>
    <p class="p2"></p></p></body></html>
登录后复制

以上就是这篇文章的主要内容,希望能够帮助到大家。

【相关教程推荐】

1. CSS视频教程
2. CSS在线手册
3. bootstrap教程

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:博客园网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号