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 ...
随机推荐
- 异常处理与MiniDump详解(4) MiniDump
http://blog.csdn.net/vagrxie/article/details/4398721 异常处理与MiniDump详解(4) MiniDump 分类: [Wi ...
- JVM内存状况查看方法和分析工具-jmap
jmap -heap 27657 Attaching to process ID 27657, please wait... Debugger attached successfully. Serve ...
- ubuntu 14 安装 JDK
$ sudo mkdir /usr/lib/java $ sudo tar zxvf jdk-7u21-linux-i586.tar.gz -C /usr/lib/java $ cd /usr/lib ...
- IOS测试程序运行耗时
iOS设备相对于电脑,内存和处理能力有限,所以一段代码或者程序运行的时间需要时刻注意,这里提供两种获取精确时间的方法. 方法一:使用系统时间 NSDate* tmpStartData = [[NSDa ...
- 常用分类列表wp_list_categories()
使用: <ul> <?php $args= array( 'depth'=>1, 'orderby'=>id, 'style'=>none ); wp_list_c ...
- Ubuntu 14.04安装OpenCV 3.1
从OpenCV官网上下载OpenCV官网上下载OpenCV的未编译源代码: 点击这里 国内很多网络打开OpenCV官网速度缓慢,可以点击如下地址直接从GitHub上下载OpenCV 3.1的源代码 下 ...
- Shell函数的简单应用
Shell函数的简单应用 在脚本内给函数传参: #!/bin/bash . /etc/init.d/functions CheckUrl (){ curl -I -s $ | head - } Che ...
- Linux命令行–更多bash shell命令(转)
4.1.1 探查程序 ps 命令 默认情况下,ps命令只会显示运行在当前控制台下的属于当前用户进程的进程 显示的当前进程的项目 进程号 运行在哪个终端(tty) 进程占用的CPU时间 Linux系统支 ...
- 微信支付开发(11) Native支付
关键字:微信公众平台 微信支付 Native原生支付作者:方倍工作室原文:http://www.cnblogs.com/txw1958/p/wxpay-native.html 由于微信支付接口更新,本 ...
- django中嵌入百度editor插件
一.安装和配置步骤: 1.先下载百度ueditor插件,并安装pip install DjangoUeditor 2.把下载好的ueditor插件放到自己的项目中 3.配置setting INSTAL ...