Css3中的变形与动画
新的转换属性
下面的表格列出了所有的转换属性:
| 属性 | 描述 | CSS |
|---|---|---|
| transform | 向元素应用 2D 或 3D 转换。 | 3 |
| transform-origin | 允许你改变被转换元素的位置。 | 3 |
2D Transform 方法
|
matrix(n,n,n,n,n,n) |
定义 2D 转换,使用六个值的矩阵。 |
|
translate(x,y) |
定义 2D 转换,沿着 X 和 Y 轴移动元素。 |
|
translateX(n) |
定义 2D 转换,沿着 X 轴移动元素。 |
|
translateY(n) |
定义 2D 转换,沿着 Y 轴移动元素。 |
|
scale(x,y) |
定义 2D 缩放转换,改变元素的宽度和高度。 |
|
scaleX(n) |
定义 2D 缩放转换,改变元素的宽度。 |
|
scaleY(n) |
定义 2D 缩放转换,改变元素的高度。 |
|
rotate(angle) |
定义 2D 旋转,在参数中规定角度。 |
|
skew(x-angle,y-angle) |
定义 2D 倾斜转换,沿着 X 和 Y 轴。 |
|
skewX(angle) |
定义 2D 倾斜转换,沿着 X 轴。 |
|
skewY(angle) |
定义 2D 倾斜转换,沿着 Y 轴。 |
Css3中的变形与动画的更多相关文章
- CSS3中的变形与动画【转】
最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...
- 第8章 CSS3中的变形与动画(上)
变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时 ...
- 第9章 CSS3中的变形与动画(下)
Keyframes介绍 Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号" ...
- CSS3中的变形与动画(二)
CSS3动画 过渡属性transiton-property 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可 ...
- CSS3中的变形与动画(一)
CSS3变形篇 旋转rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中 ...
- css3中的变形(transform)、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
- CSS3过渡、变形和动画
1.CSS3过渡 所谓CSS3过渡,就是使用CSS3让元素从一种状态慢慢转换到另一种状态.如鼠标的悬停状态就是一种过渡.如下例子: #content a{ text-decoration: n ...
- CSS3 过渡、变形和动画
一.我们来给按钮增加一个悬停效果:#content a:hover {border: 1px solid #000000;color: #000000;text-shadow: 0px 1px whi ...
- CSS3中的过渡、动画和变换
一.过渡 过渡效果一般由浏览器直接改变元素的CSS属性实现. a.transition属性 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property t ...
随机推荐
- linux OSlab4 添加自定义系统调用
http://blog.csdn.net/ly01kongjian/article/details/8947285 http://www.cnblogs.com/hoys/archive/2011/0 ...
- docker learning
Docker 配置文件位置 Docker 的配置文件可以设置大部分的后台进程参数,在各个操作系统中的存放位置不一致 在 ubuntu 中的位置是:/etc/default/docker 在 cento ...
- sqlserver 计算 百分比
,),))+'%' As 百分比 NUMERIC(P,S) P的默认值是:38 S的默认值是:-84~127 numeric(a,b)函数有两个参数,前面一个为总的位数,后面一个参数是小数点后的位数, ...
- 6 个JavaScript日期处理库
1. Later.js Later.js, a stadalone JavaScript library, offers an advanced usage for triggering recurr ...
- 【转】Swing 与EDT线程
在Swing程序中,经常能看到如下这种代码: SwingUtilities.invokeLater(new Runnable(){ @Override public void run() { text ...
- mysql基本sql语句大全(提升用语篇)
1.说明:复制表(只复制结构,源表名:a 新表名:b) (Access可用) 法一:select * into b from a where 1<>1(仅用于SQlServer) 法二:s ...
- CentOS7 + linux kernel 3.10.94 compile 简记
Linux kernel 一直以其开源著称,可以自己编译选择合适的模块,针对特定的系统可以有不同的编译选项 来源 此次编译的内核版本为3.10.94,从官网www.kernel.org下载而来,自己虚 ...
- swift-03-构造器(Designated&&Convenience)
类里面所有的存储型属性--包括所有继承自父类的属性,都必须在构造过程中设置初始值. 构造器,为了确保所有类实例中的存储型属性都能获得初始值,设置了两个构造器--他们分别是指定构造器和便利构造器. ...
- C语言:通过指针对数组元素进行排序
// // main.c // Pointer_array // // Created by ma c on 15/8/2. // Copyright (c) 2015年 bjsxt. All ...
- 3d sphere opengl
http://stackoverflow.com/questions/5988686/creating-a-3d-sphere-in-opengl-using-visual-c