matrix()方法与translate()、scale()、rotate()、skew()方法的关系

2D变换方法translate()、scale()、rotate()、skew()与matrix()的关系举例介绍。

一、介绍

2D变换方法:

    • translate():根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
    • rotate():在一个给定度数顺时针旋转元素。负值是允许的,这样是元素逆时针旋转。(绕着中心点旋转)
    • scale():元素按比例缩放,比例取决于宽度(X轴)和高度(Y轴)的参数。(缩放功能与中心点的位置有关)
    • skew():X轴和Y轴倾斜一定角度。

matrix():2D变换方法合并成一个。有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

CSS3 transform 的 matrix() 方法如下:

transform: matrix(a,b,c,d,e,f);

二、关系与举例

1、matrix()与translate()偏移功能

matrix(a,b,c,d,e,f)实现偏移,只由e、f这两个参数决定。

参数e决定水平偏移量,f决定垂直偏移量。

eg:

transform: matrix(1, 0, 0, 1, 30, 30)就等同于transform: translate(30px, 30px)

即:向右偏移30px的同时向下偏移30px

2、matrix()与scale()缩放功能

matrix(a,b,c,d,e,f)实现偏移,只由a、d这两个参数决定。

参数a决定水平缩放量,d决定垂直缩放量。即:X轴(宽度)缩放a倍,Y轴(高度)缩放d倍。

eg:

transform: matrix(2, 0, 0, 3, 0, 0)就等同于transform: scale(2, 3)

即:元素宽度变为原来的2倍,高度变为原来的3倍

3、matrix()与rotate()旋转功能

matrix(a,b,c,d,e,f)实现旋转(假设角度为θ),对应方法如下:

matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
eg:

transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0)就等同于transform:rotate(30deg)

即:以中心点为旋转点,顺时针旋转30度

4、matrix()与skew()倾斜功能

matrix(a,b,c,d,e,f)实现倾斜,与b、c两个参数有关。

b决定Y轴倾斜程度,c决定X轴倾斜程度,对应方法如下:

matrix(1,tan(θy),tan(θx),1,0,0)eg:matrix(1, 2.237161, 2.237161,1,0,0)就等同于transform:skew(20deg,20deg)即:元素在X轴上倾斜20度和Y轴上倾斜20度。
				
时间: 2024-10-13 01:36:27

matrix()方法与translate()、scale()、rotate()、skew()方法的关系的相关文章

Canvas之translate、scale、rotate、skew方法讲解!

尊重原创,欢迎转载,转载请注明: FROM  GA_studio   http://blog.csdn.net/tianjian4592 前面说Canvas大致可以分为三类: 1. save.restore 等与层的保存和回滚相关的方法: 2. scale.rotate.clipXXX 等对画布进行操作的方法: 3. drawXXX 等一系列绘画相关的方法: 前面主要讲了drawBitmap方法,并举了一个星球浮动的栗子,在那个例子中,星球有大有小,需要移动,有时候可能需求上还需要旋转或错切,有

CSS3 transform 属性详解(skew, rotate, translate, scale)

写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有必要写个博文,帮助那些不懂的人,让他们看了此文就懂. 进入正题: 先说明下,电脑屏幕的XY轴跟我们平时所说的直角坐标系是不一样的.如下图: 图上的盒子就是代表我们的电脑屏幕,原点就是屏幕的左上角,竖直向下为X轴正方向,水平向右为Y轴正方向. 1.倾斜skew 先看图 每个图下方都有skew的参数.粗的红色的线

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)(转载)

在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45deg); 共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度. 二.缩放 scale 用法:transform: scale(0.5)  或者  transform: scale(0.5, 2); 参数表示缩放倍数: 一个参数时:表示水平和

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45deg); 共一个参数"角度",单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度. 二.缩放 scale 用法:transform

translate()函数的使用方法

以下实例展示了 translate()函数的使用方法: #!/usr/bin/pythonfrom string import maketrans # 引用 maketrans 函数. intab = "aeiou" outtab = "12345" trantab = maketrans(intab, outtab) str = "this is string example....wow!!!";print str.translate(tra

自定义控件三部曲之动画篇(一)——alpha、scale、translate、rotate、set的xml属性及用法

前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的心态,想用你的app,却是因为你的技术问题,让他们不得不放弃,而你一个回访电话却让他们尽释前嫌,当最后把手机号留给他们以便随时沟通的时候,总会发来一条条的鼓励短信,让我不自主的开始内疚.哎,多么可爱的用户,多么无耐的现实. 相关文章: <Android自定义控件三部曲文章索引>:http://blog.csdn.net/harvic880925/article/details/50995268 一.概述 Android

Android自定义控件:动画类----alpha、scale、translate、rotate、set的xml属性及用法

一.概述 Android的animation由四种类型组成:C.scale.translate.rotate,对应android官方文档地址:<Animation Resources> 动画在XML配置文件中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动画效果 动作定义文件应该存放在res/anim文件夹下,访问时采用R.anim.XXX.xml的方式,位置如图: 二.下面我们逐个讲讲每个标签的属性

Physics 碰撞检测回调方法出错或者没有效果解决方法

1.碰撞检测回调方法编译出错; auto *listener = EventListenerPhysicsContact::create(); listener->onContactBegin = CC_CALLBACK_1(HelloWorld::onContactBegin,this); 在3.0rc版本中回调函数的参数变为一个,不能使用原来的两个参数; bool HelloWorld::onContactBegin(PhysicsContact& contact) { auto spr

JQ中的clone()方法与DOM中的cloneNode()方法

JQ中的clone()方法与DOM中的cloneNode()方法 cloneNode()定义和用法 cloneNode()方法创建节点的拷贝,并返回该副本. 语法: node.cloneNode(deep);  其接收一个可选参数"deep",为布尔类型,默认是false. 当设置为true,克隆当前节点,属性及当前节点的后代.若设置为false,仅仅克隆当前元素节点本身. 扩展:  使用cloneNode()方法,当被克隆的节点绑定了事件处理程序,事件处理程序是否会被一同克隆,这个我