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


一.html
<!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 >






二、实现原理

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





三.css

#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 -3 d;
  -moz-transform-style: preserve -3 d;
  -ms-transform-style: preserve -3 d;
  
  /*
  隐藏被旋转的 div 元素的背面
  */
  -webkit-backface- visibility : hidden ;
  -moz-backface- visibility : hidden ;
  -ms-backface- visibility : hidden ;
  
  -webkit-transition: 0.8 s ease-in-out ;
  -moz-transition: 0.8 s ease-in-out ;
  -ms-transition: 0.8 s 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( -180 deg);
  -moz-transform: rotateY( -180 deg);
  -ms-transform: rotateY( -180 deg);
}
#content ul li a div:last-child{
  -webkit-transform: rotateY( 180 deg);
  -moz-transform: rotateY( 180 deg);
  -ms-transform: rotateY( 180 deg);
  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 h 3 {
  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 ;
}



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值