保藏本站 保藏本站
188bet注册网主页 - 软件测验 - 常用手册 - 站长东西 - 技能社区
主页 > CSS/HTML > 正文

主页 - PHP - 数据库 - 操作体系 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS指令 - jQuery - CSS款式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

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.touzhuwang75.com/201605/yuanma/CSS3_BaiduTieba_Flop%28touzhuwang75.com%29.rar

五、总结

  CSS3供给了许多新的比方transform这样的特性,我们用这些特性的时分或许只能兼容新的浏览器,对IE6、7、8这样的老古董兼容不是很好,可是这就足够了,比方上面的比如,在IE6、7、8这些浏览器中不显现特效,只显现图片,也不丑陋,在其他浏览器对HTML5和CSS3兼容比较好的浏览器中,能够看到特效。避免了运用过多的JS,一起达到了在新式浏览器中显现酷炫的作用。

html5手机触屏touch事情介绍
HTML5中新添加了许多事情,可是因为他们的兼容问题不是很抱负,运用实战性不是太强,所以在这儿根本省掉,我们只共享运用广泛兼容不错的事情,日

HTML5实战与剖析之接触事情(touchstart、touchmove和touchend)
HTML5中新添加了许多事情,可是因为他们的兼容问题不是很抱负,运用实战性不是太强,所以在这儿根本省掉,我们只共享运用广泛兼容不错的事情,日

学习小实例--滚动条的简略完成
作用:代码:!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"htmlxmlns="http://www.w3.org/1999/xhtml"headmetahttp-equiv="Content-Ty

本周排行

更新排行

强悍的草根IT技能社区,这儿应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 touzhuwang75.com. All Rights Rreserved  京ICP备05050695号