css3上翻动画,css3 翻牌动画

最近做了一个特效，css是从网上找的，地址是这个：

把其中核心的css代码扒出来如下：

/* The properties in this rule are only necessary for the 'flip' transition.

* We need specify the perspective to create a projection matrix. This will add

* some depth as the element flips. The depth number represents the distance of

* the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate

* value.

*/

.viewport-flip {

-webkit-perspective:;

perspective:;

position: absolute;

}

.flip {

-webkit-backface-visibility: hidden;

-webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */

backface-visibility: hidden;/*backface-visibility 属性定义当元素不面向屏幕时是否可见*/

transform: translateX(0);

}

.flip.out {

-webkit-transform: rotateY(-90deg) scale(.9);

-webkit-animation-name: flipouttoleft;

-webkit-animation-duration: 175ms;

transform: rotateY(-90deg) scale(.9);

animation-name: flipouttoleft;

animation-duration: 175ms;

}

.flip.in {

-webkit-animation-name: flipintoright;

-webkit-animation-duration: 225ms;

animation-name: flipintoright;

animation-duration: 225ms;

}

.flip.out.reverse {

-webkit-transform: rotateY(90deg) scale(.9);

-webkit-animation-name: flipouttoright;

transform: rotateY(90deg) scale(.9);

animation-name: flipouttoright;

}

.flip.in.reverse {

-webkit-animation-name: flipintoleft;

animation-name: flipintoleft;

}

@-webkit-keyframes flipouttoleft {

from { -webkit-transform: rotateY(0); }

to { -webkit-transform: rotateY(-90deg) scale(.9); }

}

@keyframes flipouttoleft {

from { transform: rotateY(0); }

to { transform: rotateY(-90deg) scale(.9); }

}

@-webkit-keyframes flipouttoright {

from { -webkit-transform: rotateY(0) ; }

to { -webkit-transform: rotateY(90deg) scale(.9); }

}

@keyframes flipouttoright {

from { transform: rotateY(0); }

to { transform: rotateY(90deg) scale(.9); }

}

@-webkit-keyframes flipintoleft {

from { -webkit-transform: rotateY(-90deg) scale(.9); }

to { -webkit-transform: rotateY(0); }

}

@keyframes flipintoleft {

from { transform: rotateY(-90deg) scale(.9); }

to { transform: rotateY(0); }

}

@-webkit-keyframes flipintoright {

from { -webkit-transform: rotateY(90deg) scale(.9); }

to { -webkit-transform: rotateY(0); }

}

@keyframes flipintoright {

from { transform: rotateY(90deg) scale(.9); }

to { transform: rotateY(0); }

}

做一下简单的分析：

html结构应该如下：

其中viewport-flip是父容器，这里的绝对定位我没有看明白为什么，尝试着去掉，依旧可以正常运行，其中最关键的就是这个.flip.out .flip.in，在这两个类上定义了动画事件，以out为例子如下：

-webkit-transform: rotateY(-90deg) scale(.9);

-webkit-animation-name: flipouttoleft;

-webkit-animation-duration: 175ms;

其中规定动画为：

flipouttoleft

@-webkit-keyframes flipouttoleft {

from { -webkit-transform: rotateY(0); }

to { -webkit-transform: rotateY(-90deg) scale(.9); }/*以Y轴旋转90度，这个时候就看不见了相当于隐藏了*/

}

这样就会产生一个动画目前正在显示的元素以Y轴旋转逆时针(由rotateY(-90deg)的正负控制逆时针还是顺时针)90度，从开始from(旋转0度，即不旋转)，到最终旋转到90，旋转过程中scale(.9)表示旋转过程中元素大小为正常大小的90%。

同理，in则是把一个已经旋转90度的元素相反的方向转回0度，这样元素就显示了。

以上是对大神的代码的解读，难免有不正确的，望谅解

css3 翻牌(rotate) 以及翻转 导致边缘锯齿解决 方法

主要知识点:rotate旋转以及  outline透明的像素消除(明显降低)火狐旋转是产生的 锯齿  首先看结构:

CSS3 @keyframes 动画

CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...

使用css3的动画模拟太阳系行星公转

本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

css3 animation动画特效插件的巧用

这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

CSS3简单动画

css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画

css3常用动画+动画库

一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...

css3 animation动画技巧

一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

8款超酷而实用的CSS3按钮动画

1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...

随机推荐

iOS中什么是superView？(新手概念简述版)

文/司马陶冶(简书作者)/文章有删改原文链接:http://www.jianshu.com/p/8537dac37852 著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 在iPhone ...

redis采用tcmalloc导致无法释放内存的问题

from:http://wangneng-168.iteye.com/blog/2100379 redis使用tcmalloc管理内存,当删除了redis的key后,通过redis的info命令查看内 ...

[转]URL的解析，C语言实现

http://blog.csdn.net/cuishumao/article/details/10284463 一 说明(1)应用情况:比如基于socket来实现http协议等,这时候就需要解析URL ...

C语言数组操作和指针操作谁更高效

在上一篇博文  代码优化小技巧(持续更新......) 第三条关于数组和指针谁更高效, 意犹未尽, 决定单独拉出一篇来讲 1. 数组和指针操作对比 #include i ...

android 图片内存管理

图片对象: drawable bitmap etc.图片对象在Android上该缓存吗?什么时候缓存?怎么缓存?缓存后使用时怎么取出?怎么销毁?什么时候销毁? bitmap对象(new出来的) :需要 ...

Nginx中配置undertow进行两个项目的动静分离配置

#user nobody; worker_processes ; pid /var/run/nginx.pid; events { worker_connections ; } http { incl ...

打开TestFlight并链接到具体的应用下载界面

在我们应用正式上线前,许多时候都会有小流量的测试,选取部分核心用户抢先试用,在TestFlight出来之前,一般都是通过企业证书打包,然后提供给用户下载地址,安装测试使用,这个有个不爽之处就是,企业i ...

bzoj1503 Splay 维护名次数，支持删除

题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1503 题解: 维护一颗Splay和一个外部变量,树中每个节点表示一个人,节点权值a + 外部变 ...

按月、按日进行数据统计的Mysql语句