CSS3教程

CSS3简介

我们都知道CSS用于控制网页的样式和布局，CSS3是最新的CSS标准。2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块
CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂。

发展历程

早在2001年W3C就完成了CSS3的草案规范。CSS3规范的一个新特点是被分为若干个相互独立的模块。一方面分成若干较小的模块较利于规范及时更新和发布，及时调整模块的内容，这些模块独立实现和发布，也为日后CSS的扩展奠定了基础。另外一方面，由于受支持设备和浏览器厂商的限制，设备或者厂商可以有选择的支持一部分模块，支持CSS3的一个子集，这样有利于CSS3的推广。

时间	名称	最后状态	模块
1999.01.27 - 2019.08.13	文本修饰模块	候选推荐	css-text-decor-3
1999.06.22 - 2018.10.18	分页媒体模块	工作草案	css-page-3
1999.06.23 - 2019.10.15	多列布局	工作草案	css-multicol-1
1999.06.22 - 2018.06.19	颜色模块	推荐	css-color-3
1999.06.25 - 2014.03.20	命名空间模块	推荐	css-namespaces-3
1999.08.03 - 2018.11.06	选择器	推荐	selectors-3
2001.04.04 - 2012.06.19	媒体查询	推荐	css3-mediaqueries
2001.05.17 - 2020.12.22	文本模块	候选推荐	css-text-3
2001.07.13 - 2021.02.11	级联和继承	推荐	css-cascade-3
2001.07.13 - 2019.06.06	取值和单位模块	候选推荐	css-values-3
2001.07.26 - 2020.12.22	基本盒子模型	候选推荐	css-box-3
2001.07.31 - 2018.09.20	字体模块	推荐	css-fonts-3
2001.09.24 - 2020.12.22	背景和边框模块	候选推荐	css-backgrounds-3
2002.02.20 - 2020.11.17	列表模块	工作草案	css-lists-3
2002.05.15 - 2020.08.27	行内布局模块	工作草案	css-inline-3
2002.08.02 - 2018.06.21	基本用户界面模块	推荐	css-ui-3
2003.05.14 - 2019.08.02	生成内容模块	工作草案	css-content-3
2003.08.13 - 2019.07.16	语法模块	候选推荐	css-syntax-3
2004.02.24 - 2014.10.14	超链接显示模块	工作组笔记	css3-hyperlinks
2005.12.15 - 2015.03.26	模板布局模块	工作组笔记	css-template-3
2006.06.12 - 2014.05.13	分页媒体模块生成内容	工作草案	css-gcpm-3
2008.08.01 - 2014.10.14	Marquee模块	工作组笔记	css3-marquee
2009.07.23 - 2020.12.17	图像模块	候选推荐	css-images-3
2010.12.02 - 2019.12.10	书写模式	推荐	css-writing-modes-3
2011.09.01 - 2020.12.08	条件规则模块	候选推荐	css3-conditionalr
2012.02.07 - 2020.05.19	定位布局模块	工作草案	css-position-3
2012.02.28 - 2018.12.04	片段模块	候选推荐	css-break-3
2012.06.12 - 2020.04.21	盒子排列模块	工作草案	css-align-3
2012.09.27 - 2020.12.18	宽高大小模块	工作草案	css-sizing-3
2012.10.09 - 2017.12.14	计数器风格	候选推荐	css-counter-styles-3
2013.04.18 - 2020.06.03	溢出模块	工作草案	css-overflow-3
2014.02.20 - 2020.12.18	显示类型模块	候选推荐	css-display-3

工作原理

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   。