CSS3 转换

通过CSS3转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

它如何工作?

转换是是元素改变形状、尺寸和位置的一种效果。

你可以使用2D或3D转换你的元素。

浏览器支持

属性 浏览器支持
transform          

IE10、FireFox以及Opera支持transform属性。Chrome和Safari需要前缀-webkit-.

注释:IE9需要前缀-ms-.

2D转换方法:

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

1.translate()方法

元素从当前位置移动,根据给定的left(x坐标)和top(y坐标)位移参数:

  1. /*translate方法位移*/
  2. div {
  3. width:100px;
  4. height:80px;
  5. background-color:orange;
  6. position:absolute;
  7. left:100px;
  8. top:100px;
  9. }
  10. div.translateOne {
  11. transform:translate(30px,30px);
  12. z-index:;
  13. }
  14. div.translateTwo {
  15. background-color:blue;
  16. }

2.rotate()方法

元素顺时针给定的角度、允许负值,元素将逆时针旋转。

  1. /*2D旋转*/
  2. div {
  3. width: 150px;
  4. height: 50px;
  5. background-color: orange;
  6. text-align: center;
  7. position: absolute;
  8. left: 100px;
  9. top: 100px;
  10. }
  11.  
  12. div.rotateOne {
  13. transform: rotate(30deg);
  14. -webkit-transform:rotate(30deg);
  15. }
  16.  
  17. div.rotateTwo {
  18. background-color: blue;
  19. color: white;
  20. }

3.scale()方法

  1. /*2D缩放*/
  2. div {
  3. width: 100px;
  4. height: 100px;
  5. background-color: orange;
  6. position: absolute;
  7. left: 100px;
  8. height: 100px;
  9. }
  10.  
  11. div.scaleTwo {
  12. background-color: red;
  13. transform: scale(0.5,0.5);
  14. }

值scale(2,4)吧宽度转换为原始的2倍,把高度转换为原始的4倍。

4.skew()方法

通过skew()方法,元素倾斜给定的角度,根据给定的水平线(X轴)和垂直线(Y轴)参数:

  1. /*2D倾斜,面积不变*/
  2. div {
  3. width:100px;
  4. height:100px;
  5. background-color:orange;
  6. position:absolute;
  7. left:100px;
  8. top:100px;
  9. }
  10. div.skewTwo {
  11. background-color:red;
  12. transform:skew(30deg,0deg);
  13. }

值skew(30deg,20deg)围绕X轴把元素倾斜30度,围绕Y轴倾斜20度。

5.matrix()方法

matrix()方法把所有2D转换方法组合在一起。

matrix()方法需要六个参数,包含数学函数,允许你:旋转、缩放、移动以及倾斜元素。

如何使用matrix方法将div元素旋转30度:

  1. /*2d组合函数*/
  2. div {
  3. width: 100px;
  4. height: 100px;
  5. background-color: orange;
  6. position: absolute;
  7. left: 100px;
  8. top: 100px;
  9. }
  10. div.MatrixTwo {
  11. transform:matrix(0.866,0.5,-0.5,0.866,0,0);
  12. background-color:red;
  13. }

新的转换属性

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

属性 描述 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 2D转换的更多相关文章

  1. css3 2d转换3d转换以及动画的知识点汇总

    css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...

  2. CSS3 2D 转换

    2D 转换 在本章中,您将学到如下 2D 转换方法: translate() rotate() scale() skew() matrix() 您将在下一章学习 3D 转换. 实例 div { tra ...

  3. 【Demo】CSS3 2D转换

    2D转换transform 2D变换方法: translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. div { transform: translate(50px,1 ...

  4. CSS3—— 2D转换 3D转换 过渡 动画

    2D转换 对元素进行移动.缩放.转动.拉长或拉伸 ————>  ————>   移动 顺时针旋转 扩大/缩小 倾斜 2D变换合并  3D转换 绕x轴 绕y轴 过渡 从一种样式逐渐改变为另一 ...

  5. HTML 学习笔记 CSS3 (2D转换)

    2.scaleX(<number>) : 使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数.scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1),其基点一样是在 ...

  6. css3 2D转换(2D Transform) 动画(Animation)

    transform 版本:CSS3 内核类型 写法 Webkit(Chrome/Safari) -webkit-transform Gecko(Firefox) -moz-transform Pres ...

  7. CSS3 2D转换 动画

    transform:translate(x,y): 过度  鼠标悬浮 在2s内完成所有变化 div { width:100px; height:100px; background:red; trans ...

  8. 我最喜欢用的css3之2D转换之translate用法

    CSS3 2D 转换 div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transfor ...

  9. CSS3 Transform变形(2D转换)

    Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性 ...

随机推荐

  1. 说一说&&符

    今天添加检测代码,还得添加好几套,好蛋疼. 为了省点事,全写在HTML的行间onclick里,为此专门琢磨了一下&&的用法. 一般用&&(除了逻辑判断里),是为了简写i ...

  2. ecshop json类的使用

    ecshop中有2个地方使用了json,一个是cls_json.php文件,一个是transport.js文件. cls_json 封装了json类,可以调用里面的encode的方法,根据参数不同,进 ...

  3. thinkphp G方法的华丽升级

    ThinkPHP长期以来需要通过debug_start.debug_end方法甚至Debug类才能完成的功能,3.1版本中被一个简单的G方法取代了,不可不谓是一次华丽升级. G方法的作用包括标记位置和 ...

  4. 文成小盆友python-num7 -常用模块补充 ,python 牛逼的面相对象

    本篇内容: 常用模块的补充 python面相对象 一.常用模块补充 1.configparser模块 configparser 用于处理特定格式的文件,起内部是调用open()来实现的,他的使用场景是 ...

  5. C#复习,输入学生信息排列成绩

    C#复习:在控制台程序中使用结构体.集合,完成下列要求项目要求:一.连续输入5个学生的信息,每个学生都有以下4个内容:1.序号 - 根据输入的顺序自动生成,不需要手动填写,如输入第一个学生的序号是1, ...

  6. jquery ajax用例样板

    $.ajax({ url: '${managerPath}/customer/updateOrder.do', type: 'POST', async: false, data: { id: date ...

  7. springboot工程读取配置文件application.yml的写法

    现在流行springboot框架的项目,里面的默认配置文件为application.yml,我们怎样读取这个配置文件呢? 先贴上我得配置文件吧 目录结构 里面内容 1 写读取配置文件的工具类 @Con ...

  8. MVC4 教程

    http://blog.csdn.net/huangjihua0402/article/details/8507055 http://www.cnblogs.com/lc-chenlong/p/324 ...

  9. SCALA中的函数式编程

    演示了值函数,匿名函数,闭包... 其它具体的应用,还得在生产当中吧.. 这个告一段落..其它SAM,CURRY,高阶函数,集合,泛型,隐式类..这些,还是找专门的书去深入了解啦... C:\User ...

  10. DC DC降壓變換器ic 工作原理

    目前DC/DC轉化器大致可分為:升壓型dc dc變化器.降壓型dc dc變化器及可升壓又可降壓dc dc變換器.我們今天主要提一下降壓型dc dc變換器的原理: 見下圖降壓變換器原理圖如圖1所示, 當 ...