Transform


CSS3中,transform属性允许盒子模型被进行二维或三维空间坐标的变换。使用该属性之后,元素主要可以进行以下变换:

  • 旋转(rotate)
  • 平移(translate)
  • 缩放(scale)
  • 倾斜(skew)

下面的图片我们实现了一个旋转和缩放的变换、然后结合animation属性实现了一种常见的动画效果。

项目源码

Transform API


通过文章开头介绍的几种变换,我们可以简单概括为:

属性 描述 demo
translate(x,y) 平移变换 [注意 x,y有单位] 测试
scale(x,y) 缩放变换 [x,y无单位] 测试
rotate(angle) 旋转变换[单位为弧度,deg] 测试
skew(angleX,angleY) 拉伸变换[单位为弧度,deg] 测试
matrix(a,b,c,d,e,f) 变换矩阵[重点] 测试

基本的用法现在网上都能查询到,这里就不再赘述了。下面主要讲一下matrix

Matrix


中文译为”矩阵”,在本文中可以理解为transform模板函数。那么矩阵到底有什么用呢?相信大家都在大学或多或少了解过线代,我所理解的矩阵它的本质就是线性方程组,通过建立一种对应关系,得到目标结果的一种工具。
下图是一个矩阵方程,它的作用就是将原有坐标值(X0,Y0)通过某种变换,转换目标值(X1,Y1)
这里写图片描述

那么,matrix和transiform之间有什么联系?

通过了解到矩阵的作用,那么我们可以想象,所谓的transform变换就是一系列的坐标值转换
假设有一种模板矩阵, 它的功能就是将我们原有的坐标值,通过模板矩阵的处理,实现平移、旋转、缩放、拉伸等效果的转换过程。
简单的概括就是,我想要实现一个平移的效果。只需要实现三个步骤即可:

  1. 初始化一个图形
  2. 创建一个模板矩阵
  3. 将模板矩阵应用到初始化图形中

matrix 模板矩阵


下面是常见的几个矩阵模板:

 

属性 描述 demo
matrix(1, 0, 0, 1, e, f) 平移 测试
matrix(a, 0, 0, d, 0, 0) 缩放 测试
matrix(cosθ,sinθ,-sinθ,cosθ,0,0) 旋转 测试
matrix(1,tan(θy),tan(θx),1,0,0) 拉伸 测试

再进一步学习之前,先来回顾一些基础线代知识:
矩阵乘法

计算规则是,第一个矩阵第一行的每个数字(a和b),各自乘以第二个矩阵第一列对应位置的数字(1和2),然后将乘积相加( a x 1 + b x 2),得到结果矩阵左上角的那个值a+2b。
这里写图片描述


平移(translate)

 

数学意义是:

其中,(x0,y0)为起始点坐标,(x1,y1)就是我们要输出的目标坐标值
不难发现,e,f就是我们想要的横纵坐标上的偏移量

 

从上面的矩阵公式。我们得出,通过模板矩阵相乘,就可以得到目标函数的坐标值。

思考题:为什么坐标值格式会是(x,y,1),而不是(x,y)呢。这个1代表的是什么?


缩放(scale)

有了上面的铺垫,下面的缩放就比较简单了。
首先想一想,缩放的原理是什么?

缩放就是将x,y在对应横纵轴上进行等比例的伸长或缩小。

 

数学意义:

a, d 就是横纵坐标的伸缩量

 

思考题:为什么b,c会设置为0?


旋转(rotate)

[注意] 本文仅介绍绕原点的二维旋转。
旋转变换就明显与上面的两种有质的飞跃了,因为前两种只是单纯的线性变换,旋转变换就加上了一种新的因素(弧度)。

 


数学意义:

v绕原点旋转θ 角,得到点v’,假设 v点的坐标是(x, y) ,那么可以推导得到 v’点的坐标(x’, y’)(设原点到v的距离是r,原点到v点的向量与x轴的夹角是ϕ )

 

[拓展] 旋转矩阵的推导原理:

  • 首先是(x0,y0)关于弧度的表达式:

 

  • (x1,y1)关于弧度的表达式:(1式)


展开上面的三角函数,(2式)

  • 将1式代入到2式,得

 


拉伸(skew)

拉伸变换也可以称为倾斜变换或斜切变换。

数学意义:

倾斜的意义就是在于原点是一个动态值,然后再绕水平或竖直方向进行一定角度的倾斜。效果就类似于拉伸一个弹性物体。

 

思考题:自行推导一下。

tips:
 

好了,基本的图形变换的数学原理已经讲完了,以后还有后续的公式来进行扩充。谢谢~

 
 
学完还行练?点这里