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 ...
随机推荐
- Windows下mysql自动备份的最佳方案
网上有很多关于window下Mysql自动备份的方法,其实不乏一些不好的地方和问题,现总结出一个最好的方法供大家参考: 新建一个记事本,然后重命名为: mysql_backup.bat 然后单击右键选 ...
- nRF51822之模拟IIC
使用的工程为是基于sdk10工程 在将以nRF51_SDK_10.0.0_dc26b5e\examples\peripheral\twi_sensor作为模版 修改代码main.c #include ...
- 简述AFN(AFNetWorking 2.X)的实现分析和简单使用【转】
[转载] Axc注:版本为AFNetWorking 2.6 3.0需要修改大部分对象 一:声明本 人以前一直是使用ASI网络请求类库的.最近才开始了解使用AFNetworing这个类库.网上也肯 ...
- 关于java字符串编译优化问题
情景一:不好的字符串拼接习惯 起因是这样的:一个大牛在写了一篇关于java字符串优化问题的讲解,他提到:不要使用strObj+otherValue的方法将otherValue转换为字符串形式,因 ...
- __proto__和protaotype的区分
直接看这样一个例子. var XXX = function(){}; var p = new XXX(); 可以把上面的例子拆分为如下一个过程: var p={}; //初始化一个对象p p.__pr ...
- 流媒体学习四------- ortp队列的实现
在ortp中实现了一个通用的队列,每一个队列包括三个实体,分别是队列.消息块和数据块,这三个实体分别对应queue_t.msgb和datab结构体. queue_t的定义如下所示: typedef s ...
- easyui Tooltip 气泡信息提示
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js获取div中的文本框数据
通过div得到div里的所有数据 大神的世界无需解释,当然不是说我,当我看到这些代码的时候我惊呆了! 这是一个工具方法js: js: /* * 获取指定对象下的所有input.textarea值 * ...
- [LeetCode]题解(python):061-Rotate list
题目来源 https://leetcode.com/problems/rotate-list/ Given a list, rotate the list to the right by k plac ...
- LightOj1418 - Trees on My Island(Pick定理)
题目链接:http://lightoj.com/volume_showproblem.php?problem=1418 题意:给你多边形中的顶点,n个点按顺时针或逆时针方向给出,然后求出多边形内部有多 ...