新的转换属性

下面的表格列出了所有的转换属性:

属性 描述 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中的变形与动画的更多相关文章

  1. CSS3中的变形与动画【转】

    最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...

  2. 第8章 CSS3中的变形与动画(上)

    变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时 ...

  3. 第9章 CSS3中的变形与动画(下)

    Keyframes介绍 Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号" ...

  4. CSS3中的变形与动画(二)

    CSS3动画 过渡属性transiton-property 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可 ...

  5. CSS3中的变形与动画(一)

    CSS3变形篇 旋转rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中 ...

  6. css3中的变形(transform)、过渡(transtion)、动画(animation)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

  7. CSS3过渡、变形和动画

    1.CSS3过渡 所谓CSS3过渡,就是使用CSS3让元素从一种状态慢慢转换到另一种状态.如鼠标的悬停状态就是一种过渡.如下例子: #content a{     text-decoration: n ...

  8. CSS3 过渡、变形和动画

    一.我们来给按钮增加一个悬停效果:#content a:hover {border: 1px solid #000000;color: #000000;text-shadow: 0px 1px whi ...

  9. CSS3中的过渡、动画和变换

    一.过渡 过渡效果一般由浏览器直接改变元素的CSS属性实现. a.transition属性 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property t ...

随机推荐

  1. ADS报错 Warning : L6301W:Could not find file C:\Program Files . Error : L6218 : Undefined symbol ......

    ADS1.2编译时,出现找不到一个不存在目录下的目标文件(*.o) 编译一个COPY到硬盘上的一个工程,出现以下的fatal error message: Error: (Fatal)L6002: C ...

  2. CDH(Cloudera)与hadoop(apache)对比

    本文出自:CDH(Cloudera)与hadoop(apache)对比http://www.aboutyun.com/thread-9225-1-1.html(出处: about云开发)   问题导读 ...

  3. php日期时间函数 整理

    设定系统默认时区 date_default_timezone_get() $tz='America/Los_Angeles'; 返回系统默认时区 date_default_timezone_set($ ...

  4. javascript值和引用

    JavaScript引用指向的是值. 简单值(即标量基本类型值,基本类型值,js中6类,null.undefined.boolean.number.string和symbol)总是通过值复制的方式来赋 ...

  5. Delphi调用约定

    Register Calling Convention Ojbect Pascal的默认调用约定为register,寄存器调用约定会将前三个参数依次放入eax,edx,ecx,返回值是eax(根据类型 ...

  6. 强调语气<strong>和<em>标签,文字设置单独样式<span>

    区别:1,<em> 表示强调,<strong> 表示更强烈的强调. 2,并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示. 3,两个 ...

  7. mysql基本sql语句大全(基础用语篇)

    1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- 创建 备份 ...

  8. LightOj1285 - Drawing Simple Polygon(连接多边形各点)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1285 题意:给你一些点,然后把它们用一条线把它们连起来,构成一个多边形,不能有相交,必 ...

  9. golang AES/ECB/PKCS5 加密解密 url-safe-base64

    因为项目的需要用到golang的一种特殊的加密解密算法AES/ECB/PKCS5,但是算法并没有包含在标准库中,经过多次失败的尝试,终于解码成功,特此分享: /* 描述 : golang AES/EC ...

  10. SpringMVC中JSP取不到ModelAndView,ModelMap的数据原因

    最近maven了一个web项目 无论我用ModelAndView还是ModelMap,在视图层不管是用 ${msg} 还是用JSTL的<c:out value="${msg}" ...