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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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度。
技术分享

 



 

 

 

 

 

 

 

 









以上是关于matrix()方法与translate()scale()rotate()skew()方法的关系的主要内容,如果未能解决你的问题,请参考以下文章

Matrix: Matrix的,postScale(), postTranslate()方法

Canvas,Matrix的变换顺序

Canvas 矩阵变换与matrix镜像详解

Android 中的 Matrix

jquery 设置 transform/translate 获取 transform/translate 的值

Canvas中rotate与skew详解