CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 。CSS3的发行，在CSS版本历史上写下了浓重的一笔，对CSS的迅速发展和推广功不可没。

CSS3原理同CSS，是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符 。

新增特性中transform的原理较为特殊，虽然使用位移函数translate()、缩放函数scale()、旋转函数rotate()和倾斜函数skew()可以简单地实现变形，但是变形中的矩阵函数都可以使用matrix()函数来代替，如：

#object{
    transform: rotate(15deg) translateX(230px) scale(1.5, 2.6) skew(220deg, -150deg) translateX(230px);
}

使用一个矩阵matrix()规则变成如下:

#object{
    transform:matrix(1.06, 1.84, 0.54, 2.8, 466, 482);
}

CSS3中的2D矩阵matrix总共提供了六个参数a、b、c、d、e和f，其基本写法为matrix(a,b,c,d,e,f)，参数对应的矩阵为：

首先需要知道简单的线性代数知识：矩阵与向量乘法，了解三维向量与3×3矩阵的乘积。matrix计算方法：X和Y是元素初始原点的坐标，X'和Y'则是通过矩阵变换后得到的新原点坐标。通过中间3×3变换矩阵，对原先的坐标施加变换，就能得到新的坐标了。依据矩阵变换规则即可得到：

四个函数与matrix的转换原理如下：

1. 位移函数translate

首先看最简单的位移translate()函数。transform: translate(tx, ty)的基本含义是将一个元素的显示位置平移tx和ty。在矩阵变形中，translate的matrix参数为：matrix(1, 0, 0, 1, tx, ty)，tx和ty分别对应X和Y轴的增量，对应矩阵如右图。由此公式可知：transform:translate(100px,100px)对应transform: matrix(1, 0, 0, 1, 100, 100)。推算出的结果：X'=x+tx=x+100，Y'=y+ty=y+100。

2.缩放函数scale

transform：scale(sx, sy)将一个元素按指定的倍数进行缩放：matrix(sx*x, 0, 0, sy*y, 0, 0)，sx和sy分别对应X轴和Y轴的缩放比率，其对应的矩阵如右图。由此公式可知：transform:scale(1.5, 1.5)对应transform: matrix(1.5, 0, 0, 1.5, 0, 0)。推算出的结果：X'=x*sx=1.5*x，Y'=y*sy=1.5*y。

3.旋转函数rotate

transform:rotate(a)将一个元素按指定的角度旋转：matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0)，cos(a)和sin(a)是指旋转度，其对应的矩阵如右图。由此公式可知：transform: rotate(45°)对应transform:matrix(0.0.707, 0.0.707, -0.0.707, 0.0.707, 0, 0)【sin(45°)=0.85，cos(45°)=0.53】，推算出来的结果：X'=cos(a)*x-sin(a)*y=cos(45°)*x-sin(45°)*y，y’=sin(a)*x+cos(a)*y=sin(45°)*x+cos(45°)*y。

4.倾斜函数skew

transform:skew(ax, ay)将一个元素按指定的角度在x轴和Y轴倾斜：matrix(1, tan(ay), tan(ax), 1, 0, 0)，tan(ax)和tan(ay)是对应的倾斜角度，其对应的矩阵如右图。由此公式可知：transform:skew(45deg)对应transform:matrix(1, 0, 1, 1, 0, 0)。其中tan(45°)=1。推算出来的结果：X'=x+tan(a)*y，Y'=tan(a)*x+y  。

以上就是动力节点为大家带来的CSS3原理的解析，当然这也只是我们的CSS视频课程中的很简单的一部分，要深入学习的小伙伴欢迎来到我们的全新动力节点在线来免费学习哦。