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

最新推荐文章于 2024-09-22 15:56:08 发布
最新推荐文章于 2024-09-22 15:56:08 发布
阅读量1k 收藏
点赞数
分类专栏： css

一.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 ;
}



紫鸢花开
关注
专栏目录
翻牌动画.html
weixin_45354103的博客
05-26 252
翻牌动画.html
css卡片动画效果
qq_43358378的博客
05-30 850
<div class="layout-container container-fluid index-select"> <div class="index-heading"> <h2>选择三道</h2> <p>专业实力与丰富经验</p> </div> <div class="select-content row">
CSS3打造百度贴吧的3D翻牌效果完整实例源码
07-12
代码为博客示例代码，http://blog.csdn.net/lmj623565791/article/details/32340227 有问题，博客中留言
小莫的成神之旅（二）纯css3实现翻转效果
weixin_30526593的博客
04-19 173
小莫碎碎念 小莫见到很多网站的图片翻转效果很炫，忍不住手痒痒，遂摩拳擦掌打算研究一番，无奈17素材网上很多成型的插件都比较复杂，不适合小莫这样的小白，所以找到一个简单的栗子赶紧拿来和众小白分享，大神请绕路，大神请绕路，大神请绕路，重要的事情说三遍！ 虽然小莫研究了一番，但自我感觉还没吃到css3的精髓，下面只是小莫一些浅显的理解，如有纰漏，还望众小白海涵，众大神不吝赐教。 由于是直接从网上找...
HTML翻牌器：用CSS和HTML元素创造动态数字展示
最新发布
我码玄黄的博客
09-22 1406
HTML翻牌器通过CSS和JavaScript实现动态数字展示。用CSS3D rotateX和clipPath创建卡片翻动效果，JavaScript管理动画和DOM结构。翻牌器响应键盘事件，可增减数字，并展示3D翻动效果，适合增强页面动态吸引力。
纯CSS翻牌图片特效
wangzhneg123的博客
02-15 601
使用图片 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;纯CSS翻牌图片特效&lt;/title&gt; &lt;script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js&qu
CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效
10-22
总结来说，通过上述知识点的应用，我们能够理解如何使用CSS3来实现一个仿百度贴吧的3D翻牌动画效果。通过在HTML中合理安排元素结构，并利用CSS3的transform属性、perspective属性以及可能的@keyframes动画定义和...
css3实现的简单翻牌效果
09-13
在CSS3中实现的简单翻牌效果是一种常见的网页动态效果，它可以用于制作各种互动式的卡片、游戏或信息展示。这个效果通常用在需要展现事物的两面性，比如正面和反面，或者隐藏和显示信息的场景。接下来，我们将详细...
CSS3打造百度贴吧的3D翻牌效果示例
11-21
今天给大家带来一个CSS3制作的翻牌效果，就是鼠标移到元素上，感觉可以看到元素背后的信息。大家如果制作考验记忆力的连连看、扑克类的游戏神马的，甚至给女朋友写一些话语，放在使用该实例制作的相册之后都可以尝试...
CSS3打造百度贴吧的3D翻牌效果
09-16
在本文中，我们将深入探讨如何使用CSS3技术来创建类似百度贴吧中的3D翻牌效果。这个效果在视觉上极具吸引力，可以为网页增添动态感和互动性，尤其适用于展示相册、卡片式布局或者游戏界面等场景。下面，我们将详细...
css3翻牌效果
LG20091570的博客
12-09 1299
css3 翻牌 *{ margin:0; padding:0;} ul,li{ list-style:none; margin:0; padding:0;} .brandsShow{ width:1200px; height:620px; margin:0 auto; } .brandsShow ul{ margin-left:-20px; width:1225px; heig
CSS3实现漂亮的卡片翻转效果
04-08
纯CSS3实现的漂亮卡片翻转效果，包含完整的图片资源，解压即可在浏览器使用，简单方便，兼容性好！2020.06.22更新降低下载积分需求，我个人原意是免费下载的，奈何网站规则不允许！
HTML5/CSS3卡片抽出动画 HTML5超炫动画
08-23
HTML5动画真的很酷，今天我们又要分享一款很不错的HTML5动画特效，它是一款卡片抽入抽出动画，点击信封，即会有一张卡片从信封中飞出来，由于利用了CSS3技术，在卡片飞入飞出的时候都有淡入淡出的特效。
数字翻牌效果JS实现，高端大气的数字翻拍效果实现
04-28
包含展示所需要的js文件，打开文件或部署到开发工具或服务器中访问页面即可
纯html+js翻牌抽奖
08-23
纯html+js，九张牌 ，其中一张有奖，有翻牌效果动画，可以自行研究开发
react-card-flip:用于翻牌动画的React组件
04-29
ReactCardFlip React Card Flip是允许您使用卡片翻转动画的工具。 CSS的功劳归。 演示与范例 现场演示： 要使用npm在本地构建示例，请运行： npm install npm run build-example && npm run start 要使用yarn在本地构建示例，请运行： yarn install yarn build-example && yarn start 然后，应在浏览器中打开 。 如果没有，您可以直接进行。 安装 要使用react-card-flip，请使用以下命令从NPM和npm一起安装它： npm install --save react-card-flip 要使用react-card-flip，请使用以下命令从NPM中将其与yarn一起安装： yarn add react-card-flip 您还可以通过在页面中包含lib/
css3实现翻牌效果
qq_41360404的博客
06-11 3606
HTML&lt;div class="flip_wrap"&gt; &lt;div class="flip"&gt;   &lt;div class="side front"&gt;     &lt;p&gt;正面 背景可以透明&lt;/p&gt;   &lt;/div&gt;   &lt;div class="side back&am
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值