百度钱包的步骤:
1.建一个盒子,里面放两个盒子,代表正反面,两个盒子叠一起,正面层次高
2.当鼠标Hover时,正面盒子从0deg->-180deg,反面盒子从-180deg->0deg
3.正反面盒子都设置背面隐藏backface-visibility HTML结构:
div.box>div.z+div.f CSS:
        .box{
width: 300px;
height: 300px;
position: relative;
}
.z,.f{
width: 300px;
height: 300px;
position: absolute;
background: url("image/bdbg.png") no-repeat left bottom;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

}
.z{
z-index:;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.f{
background-position: -305px bottom;
z-index:;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.box:hover .z{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.box:hover .f{
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
 

CSS3动画之百度钱包的更多相关文章

  1. CSS3动画详解(超详细)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...

  2. CSS3动画详解(图文教程)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...

  3. CSS3动画:流彩文字效果+图片模糊效果+边框伸展效果实现

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

  4. CSS3 动画的一些属性

    定义式 @keyframes 动画名称{ from{ } to{ } } 调用式 动画类似函数,只定义不调用是没效果的,所以要配合调用式使用. animation: 动画名称 动画时间 延时 时间曲线 ...

  5. css3动画第一式--简单翻滚

    在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...

  6. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  7. 学习CSS3动画(animation)

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  8. 用CSS3动画,让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  9. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

随机推荐

  1. jquery的uploadify上传jsp+servlet

    1.准备材料:下载jquery.uploadify上传js   注意:这个上传在firefox下会出现问题如果你在项目中加了拦截器,因为session会丢失,所以你可以传参的时候带上你所需要的条件,在 ...

  2. Oracle11g R2学习系列 之七安全性

    其实,对于目前我使用的Oracle的水平来看,还达不到使用安全管理的高度,只是作为一个学习来看一下. 关于Oracle的安全管理,一般使用OEM来操作完成好了,入口是:OEM的“服务器”属性页中,选择 ...

  3. POJ2446 二分图最大匹配

    问题:POJ2446 分析: 采用黑白相间的方法把棋盘分成两个点集,是否可以用1*2的卡片实现全覆盖等价于二分图是否有完全匹配. AC代码 //Memory: 172K Time: 32MS #inc ...

  4. 如何实现SQL事务的提交,又不对外进行污染(2)

    紧接着上文,这里主要记录事务操作,实现多实体的功能 在SqlTran类中添加方法如下: 1.两个不同实体类型的事务方法: /// <summary> /// 执行事务(事务中不同实体) / ...

  5. Realm

    还在为数据库不能获取最新数据而犯愁?信我,你只是需要一个活着的数据库——Realm 写在前面: 又到一年一度七夕虐狗节,看着大家忍受着各种朋友圈和QQ空间还有现实生活中的轮番轰炸,我实在不忍心再在这里 ...

  6. 再谈Redirect(客户端重定向)和Dispatch(服务器端重定向)

    这是两个常常被放在一起进行比较的概念,今天对这两个概念再重新回顾一下,前者发生在客户端(浏览器),后者发生在服务器端,因此也有人把前者称为客户端重定向,把后者称为服务器端重定向,虽然对于后者这种称谓并 ...

  7. android 退出方案 导致内存泄露

    比较奇怪android没有给出一个统一的退出接口,网上查了很多材料也出现了一些错误,在此记录一下,遇到的,与总结的. 1.常见概念,方法 finish() 通知结束当前activity实例,finis ...

  8. Asset Catalog Creator Free 生成程序内图标的软件

    Asset Catalog Creator Free  生成程序内图标的软件

  9. DB_NAME、DB_UNIQUE_NAME、SERVICE_NAME和INSTANCE_NAME等的区别

    摘自:http://space.itpub.net/7922095/viewspace-715406 搭建DG时,突然想起oracle这些为数众多的name,以下是概念整理,仅代表个人观点 DB_NA ...

  10. (转载)解决WPF动画属性锁死问题

    此文来自: 马开东博客 转载请注明出处 网址:http://www.makaidong.com 一般锁死问题都是出在后台代码写的动画中,以下为转载的解决方案! 方法一:将动画的 FillBehavio ...