CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效

今天分享一个CSS3制作的翻牌效果,效果如下图所示,所过把把这个效果应用于相册肯定会很炫的。呵呵,超酷啊。

一、HTML代码:

  因为是CSS3实现,所以大家可以看到没有任何的JS代码。ul为一组图片,每个li中有个a(因为我们希望点击图片可以跳转),a中包含两个div,一个是正常显示时的(即显示图片),一个是图片旋转后显示的(即介绍)。

<!doctype html>
<html>
  <head>
    <meta charset="gb2312">
    <title>百度帖吧 CSS3 翻牌效果</title>
    <link rel="stylesheet" type="text/css" href="style/reset.css">
    <link rel="stylesheet" type="text/css" href="style/tieba.brand.css">
  </head>

  <body>
   <h1>百度帖吧 CSS3 翻牌效果</h1>
    <h2>powered by <a href="http://blog.wangjunfeng.com" target="_blank">射雕天龙的博客</a></h2>
    <div id="content">
     <ul>
       <li>
         <a href="http://blog.wangjunfeng.com" target="_blank">
           <div><img alt="" src="images/1.jpg"/></div>
            <div>
             <h3>漩涡鸣人</h3>
              <p>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐,无父无母的他受尽了村人的冷眼与歧视,他下定决心要成为第六代火影,让所有人都认同他的存在。</p>
            </div>
          </a>
        </li>
        <li>
         <a href="http://blog.wangjunfeng.com" target="_blank">
           <div>
             <img alt="" src="images/2.jpg"/>
            </div>
            <div>
             <h3>日向雏田</h3>
              <p>日本漫画家岸本齐史作品《火影忍者》中的3号女主角。木叶忍者村的女忍者,木叶名门日向一族宗家族长的长女。喜欢漩涡鸣人,原本是个性格柔弱的女孩,但是在鸣人的影响下逐渐变得坚强,并逐渐成长为一名优秀的忍者。</p>
            </div>
          </a>
        </li>
        <li>
         <a href="http://blog.wangjunfeng.com" target="_blank">
           <div><img alt="" src="images/3.jpg"/></div>
            <div>
             <h3>蒙奇·D·路飞</h3>
              <p>蒙奇·D·路飞 是日本人气动漫 《海贼王》中的主人公。是日本人气动漫 《海贼王》中的主人公。草帽海贼团船长,梦想是找到传说中的宝藏 —— ONE PIECE,成为海贼王。</p>
            </div>
          </a>
        </li>
        <li>
         <a href="http://blog.wangjunfeng.com" target="_blank">
           <div>
             <img alt="" src="images/4.jpg"/>
            </div>
            <div>
             <h3>盒子先生</h3>
              <p>Danbo是一只用废纸盒DIY出来的可爱玩偶,圆圆的眼睛和三角形的嘴巴,时刻露出无辜的表情,让人看到就心软,Danbo是个纯真善良的小家伙,在它单纯的幻想世界里,总是透露出最纯真可爱的动人气息。</p>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </body>
</html>

二、CSS3代码

  我已经在里面部分地方做出了注释,应该很容易理解。

#content ul{
 width:960px;
 padding:60px 0;
 margin:0 auto;
}
#content ul li{
 width:225px;
 height:180px;
 margin-right:20px;
 float:left;
}
#content ul li:last-child{
 margin-right: 0;
}
#content ul li a{
 display:block;
 height:180px;
 /*
 设置元素被查看位置的视图:
 perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
 当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。
 */
 -webkit-perspective:500px;
 -moz-perspective:500px;
 -ms-perspective:500px;
 perspective:500px;

 position: relative;
}
#content ul li a > div{
 top:0;
 left:0;
 width:100%;
 height:180px;
 color:#fff;

 /*
 指定嵌套元素如何在3D空间中呈现。
 */
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;

 /*
 隐藏被旋转的 div 元素的背面
 */
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;

 -webkit-transition:0.8s ease-in-out ;
 -moz-transition:0.8s ease-in-out ;
 -ms-transition:0.8s ease-in-out ;

 position:absolute;
}
#content ul li a div:first-child{
 -webkit-transform: rotateY(0);
 -moz-transform: rotateY(0);
 -ms-transform: rotateY(0);
 z-index: 2;
}
#content ul li a:hover div:first-child{
 -webkit-transform: rotateY(-180deg);
 -moz-transform: rotateY(-180deg);
 -ms-transform: rotateY(-180deg);
}
#content ul li a div:last-child{
 -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -ms-transform: rotateY(180deg);
 z-index: 1;
 background:url('../images/bg.jpg') no-repeat;
}
#content ul li a:hover div:last-child{
 -webkit-transform: rotateY(0);
 -moz-transform: rotateY(0);
 -ms-transform: rotateY(0);
 z-index: 1;
}
#content ul li a div h3{
 margin:0 auto 15px;
 padding:15px 0;
 width:200px;
 height:16px;
 line-height:16px;
 font-size: 14px;
 text-align: center;
 border-bottom:1px #fff dashed;
}
#content ul li a div p{
 padding:0 10px;
 font-size: 12px;
 text-indent: 2em;
 line-height:18px;
}

三、实现原理

  默认图片rotateY=0;鼠标指向为rotateY=-180,负数,也就是逆时针绕y轴旋转,正数,则为顺时针;其他两个轴同理;鼠标指向时:图片(div:first-child),从0度绕y轴逆时针旋转180度到达-180度;介绍(div:last-child)从180度绕y轴逆时针旋转180度到达0度。造成两个一起逆时针旋转的效果。有人可能会问为啥介绍默认不是0度,这里注意下,介绍逆时针旋转180度之后是正面状态,所以当倍图片遮盖时,相当于从正常状态顺时针旋转了180度,因为鼠标指向时需要恢复正常状态。

四、源代码下载

http://xiazai.jb51.net/201605/yuanma/CSS3_BaiduTieba_Flop%28jb51.net%29.rar

五、总结

  CSS3提供了很多新的诸如transform这样的特性,我们用这些特性的时候可能只能兼容新的浏览器,对IE6、7、8这样的老古董兼容不是很好,但是这就足够了,比如上面的例子,在IE6、7、8这些浏览器中不显示特效,只显示图片,也不难看,在其他浏览器对HTML5和CSS3兼容比较好的浏览器中,可以看到特效。避免了使用过多的JS,同时达到了在新式浏览器中显示酷炫的效果。

(0)

相关推荐

  • CSS3实现3D文字动画效果

    body{background:#333;} h1{font:normal 90px/1.5 'Ultra','Curlz MT','Bauhaus 93','Blackoak Std',Courier,Arial;color:#7e9409;position:absolute;top:85px;left:10px;width:300px; -moz-animation: 1s slidein; -webkit-animation: 1s slidein; -webkit-perspective

  • jquery+CSS3实现3D拖拽相册效果

    很久之前练习过的一个实践,复习完渐变.圆角.3D变形.拖拽等等来看源码,估计还不会太凌乱(◎﹏◎)哈哈哈 效果图: HTML: <!doctype html> <html onselectstart="return false;" lang="en"><!-- !important --> <head> <meta charset="UTF-8"> <title>3D拖拽相册

  • 原生javascript+css3编写的3D魔方动画旋扭特效

    一直从事于后端编程工作,工作中也经常接触和使用一些前端技术,但大多数还是用于操作和控制数据与客户端交互工作.随着互联网技术的发展以及硬件性能的不断提升,人们对于交互式体验已变得越来越重视,进而前端技术已经越来越突显出它的重要性,特别是一些炫酷的特效,精美的UI设计,都使人眼前一亮,顿时觉得网站平台都高大上不少,很博人们眼球,给人们以很好的视觉冲击,特别是现在的css3,HTML5技术的更新,使得以更小的代价就可以轻松实现这些效果,故此,顿时膜拜起前端技术,悠然起了兴趣,跃跃欲试,随机利用css3

  • 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示. 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性 从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" class="open" value=&quo

  • CSS3 3D 技术手把手教你玩转

    css3的3d起步 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果.旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就包括X轴,Y轴,Z轴旋转.平移同理. 当然用理论来说明,估计你还不明白.下面是3个gif: 沿着X轴旋转 沿着Y轴旋转 沿着Z轴旋转 旋转应该没问题了,那理解平移起来就比较容易了,就是在在X轴.Y轴.z轴移动. 你可能会说透视比较不好理

  • jQuery+CSS3实现3D立方体旋转效果

    本文介绍了如何利用jQuery+CSS3实现3D立方体旋转效果,先看一看效果图: 切换图片过程中,图片进行旋转: HTML结构 3D图片画廊的图片列表和导航按钮分别使用两个无序列表来制作. <section> <div id="css3dimageslider" class="transparency"> <ul> <li> <img src="img/css3dimg1.jpg"> &

  • CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效

    今天分享一个CSS3制作的翻牌效果,效果如下图所示,所过把把这个效果应用于相册肯定会很炫的.呵呵,超酷啊. 一.HTML代码: 因为是CSS3实现,所以大家可以看到没有任何的JS代码.ul为一组图片,每个li中有个a(因为我们希望点击图片可以跳转),a中包含两个div,一个是正常显示时的(即显示图片),一个是图片旋转后显示的(即介绍). <!doctype html> <html> <head> <meta charset="gb2312"&g

  • thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解

    本文实例讲述了thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果.分享给大家供大家参考,具体如下: 用过百度搜索的人应该都知道这个效果,今天我用ThinkPHP+Mysql+Ajax来实现这样的一个效果,首先我把所有的代码都先给大家,最后再来讲解. 百度即时搜索效果图 运行效果图 数据库截图 城市表 学校表 控制层代码(SchoolController.class.php) <?php namespace Wechat\Controller; use Think\Controll

  • PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)

    本文实例讲述了PHP实现仿百度文库,豆丁在线文档效果.分享给大家供大家参考,具体如下: 由于项目要实现类似百度文库的功能,又是我一个人做的项目,所以就想到找免费的现成的来使用.在网上找到的都是一样的.如下: Flash Paper支持Office文档(.doc,.xls,.ppt)直接转换为PDF或SWF,速度很快,效果较好.可惜,Flash Paper V2.2后没有再更新了.安装Flash Paper后,可以直接使用命令调用FlashPrinter.exe,实现批量转换. 例如:C:\Fla

  • jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码

    本文实例讲述了jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码.分享给大家供大家参考.具体如下: 这是一款仿百度首页jQuery滑动伸缩展开的添加服务效果,其实是一款伸缩菜单,只不过这个菜单有点特别,只从一头向另一头伸展出去,菜单的伸缩效果平滑,设计精美. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-baidu-index-show-serv-style-codes/ 具体代码如下: <!DOCTYPE html PUBLI

  • js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果

    本文实例讲述了js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果.分享给大家供大家参考.具体如下: 这是一款可在同一页面中多次调用的TAB选项卡代码,仿百度风云榜的TAB切换效果,用到了几张修饰图片,请顺着代码下载所需的图片,然后上传到你的网站中,修改代码内的路径就可以用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-baidu-style-tab-cha-codes/ 具体代码如下: <!DOCTYPE html PUBL

  • jQuery实现的仿百度分页足迹效果代码

    本文实例讲述了jQuery实现的仿百度分页足迹效果代码.分享给大家供大家参考,具体如下: 这是一个类似于百度的分页足迹效果,基于jquery,原理就是所有为奇数的足迹元素给不一样的样式而已,其它的非奇数元素就按默认的样式. 参数说明: obj为所有奇数元素 even当前所要点击触发事件 bg为足迹元素 active_bg为点击后的足迹背景 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-baidu-page-style-code

  • JavaScript仿百度图片浏览效果

    本文实例为大家分享了js图片浏览效果的具体代码,供大家参考,具体内容如下 在线地址:http://www.hui12.com/nbin/demo/imgskim/index.html https://nbin2008.github.io/demo/imgskim/index.html 效果图: index <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仿

  • 基于JS实现仿百度百家主页的轮播图效果

    HTML <div class="ShowEntry"> <!-- <div id="widget_content_player" class="Player" alog-group="log-player">--> <!--------- 右击箭头---------> <a href="javascript:void(0);" rel="ex

  • jQuery实现的仿百度,仿谷歌搜索下拉框效果示例

    本文实例讲述了jQuery实现的仿百度,仿谷歌搜索下拉框效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>

  • 基于jQuery实现仿百度首页选项卡切换效果

    以下代码比较简单,所以没给大家附太多的注释,有问题欢迎给我留言,具体详情请看下文代码吧. 先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title&

随机推荐