月度归档： 2011年1月

我的博客很少有转载的文章，今天难得转一篇，因为文中我也客串了一把，呵呵，并且文中的观点非常认同，所以转载过来，供大家探讨。原文地址：糖伴西红柿的Be Pro。

=======================================

最近再次仔细把《HTML5设计原理》重新过了一遍，比起上次粗粗的浏览，收获更多，这篇文章没有任何关于 HTML5 标签、api 的使用的详细解释，而是对其背后的设计原理做了详细说明。这是 HTML5 一切纷繁表象背后的真义，值得每个前端工作者多次阅读。

下午和小飞 @shawphy 讨论一些问题的时候，说到了中文书写里的“的、得、地”地区别。据说现在已经把这三个 de 统一，不做区分了。想想也是，虽然我受教育的时候是区分三者使用的，但是我也一直没弄清楚它们之间的区别。因为最近的一些书写要求，还想趁过年期间回去请教下俺那当了一辈子语文教师的爹来着。

小飞说：“有一种观点认为，语言是活的，随着人们的使用而变化的。如果大部分人都不分了，那也就不要再分了。感觉着就像是HTML5一样。HTML5 很宽容，比如关于属性引号。按理需要有引号，但现在有没有都无所谓了。”

这就不得不提到 HTML5 设计原理其中的一条：“发送时要保守；接收时要开放。” HTML5 以包容的心接受开发者书写的文档，这些文档发送到同样敞开胸怀的浏览器，以使得那些不够标准的文档也可以渲染出来。

与之相对的是已经死去的 XHTML2 ，（呃，突然发现 XHTML 。。。2。想起郭德纲的一句玩笑：“CCTV。。。2，多大的勇气，谁好意思承认这个，人家还写上了。”）XHTML2 是绝对的理想派，要求严格使用 XML 的错误处理模型，也就是遇到一个错误就会停止解析。这对文档书写着的要求得多高啊。当然最为开发者，我们应该遵从最佳实践，尽量保证文档格式的正确。但是谁也不能保证 100% 的正确性，作为开放的互联网，对错误零容忍，导致浏览器无法渲染确实不是那么回事。

尤其是技术就像数码产品，越来越先进，但是价格（门槛）越来越低。我之前有私心，眼看国内一些人对技术的滥用，导致的网上的虚假信息、垃圾信息泛滥，甚至一度希望一些技术应该保有一定的门槛。但是后来想明白了，互联网本身就是开放到，技术生来也应该是服务每一个人的，至于怎么使用，那就要看人自己的选择了。

遵从伯斯塔尔法则（Postel’s Law）的 HTML5 在于完美理想话的 XHTML2 的角力中胜利了。或者应该说是人性再一次取得了胜利，人人追求完美，但是最后还得面对现实。

我们应该看到伯斯塔尔法则其实是同时对发送者和接收者有要求的，”接收时要开放“是对标准和浏览器的要求，而”发送时保守“则是对文档作者的要求。

回到“的 得 地”这个问题。小飞问：”这些坚持 三个 de 不同的人，是不是就好像坚持 xhtml2 的人呢？“ 我认为不然，这些人是选择了发送时保守的“开发者”。不区分这三个 de 的人，如果是普通人，自然无可厚非，但是作为职业的作家，如果无法区分这三者，就算不上好的作家。

同样的产品，不同的工艺就决定了价值的不一样。A货再能以假乱真，也不能和真品等价。同样，作为一名职业的前端工程师，在职业的道路上，我们的选择决定了输出的产品的质量，产品质量反过来也决定了我们自身的价值。

啰哩巴嗦的说了这么多，其实是希望各位前端工程师（其实也可以延伸至各个行业的从业者）能更加专业些，在发送时更加”保守“些。Be pro，这也是 2011 我对自己的要求。

前几天Eric Meyer又思考了一下reset.css的问题，于是有所更新，具体为何要这样做，请看原文Reset Revisited。注意最开始的那句

NOTE: WORK IN PROGRESS
USE WITH CAUTION AND TEST WITH ABANDON

使用需谨慎！

/* http://meyerweb.com/eric/tools/css/reset/
v2.0b1 | 201101
NOTE: WORK IN PROGRESS
USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

/* remember to define visible focus styles!
:focus {
outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

想写写关于矩阵变换的博文已经想了很久了，今天看到 winter 写的一篇博客CSS3:transform与transition背后的数学原理，于是就促成了本文。注意，下面的演示内容需要现代浏览器支持。比如Chrome/Firefox/Opera。阅读器中无法看到演示。

矩阵是线性代数中的内容，在计算机图形学中就拿来做矩阵变换。在以前，对于前端工作来说，几乎用不到矩阵变换。然而，随着浏览器的进步，HTML5和CSS3的普及，对于前端可以操作的东西越来越多，于是，矩阵变换也出现在视野当中了。

矩阵变换，听起来是一个挺高级的东西，其实本质上只不过是把一系列简单的数学运算给包装一下，赋予一个比较华丽和高深的外表而已。如果你之前没有接触过矩阵运算，也不用慌，跳过下面矩阵公式，直接看每条后面的黑体字公式即可。这些公式仅仅涉及高中水平的加减运算和三角函数而已。除了最开始的时候我会搬出那个矩阵，之后的讨论我会避开矩阵的公式，直接用容易理解的方式阐述问题。

最早浏览器中支持的矩阵变换可能是在SVG的标准中。之后跟图形带点边的CSS 3以及HTML5的Canvas中也有了矩阵变换，当然强大的Flash以及Flex中也有变换矩阵。他们的基本原理都是一样的。目前2D的矩阵变换已经有不少浏览器支持了，而3D的变换还需时日。

说了半天矩阵变换，其实本质上来说，一个元素渲染后就可以得到一张位图，然后对这个位图上每一点进行变换，就可以得到新的一张位图，从而产生平移、缩放、旋转，切变以及镜像反射等效果了。

基本公式

目前不论是SVG也好，CSS 3也好，还是Canvas，2D的矩阵变换都提供了6个参数a b c d e f，其使用基本公式是这样的：

其中，x和y是元素最开始的坐标，x’ 和y’则是通过矩阵变换后得到新的坐标。
通过中间的那个3×3的变换矩阵，对原先的坐标施加变换，就能得到新的坐标了。

注意！a b c d e f几个参数的排列方式，是竖着排的，网上有不少文章排列方向有误。

根据矩阵乘法的运算法则，上面的矩阵式子可以化成下面的两个式子

x’=ax+cy+e
y’=bx+dy+f

也就是说，别看上面有那么一大坨的东西，本质上就是上面这两条简简单单的公式而已。之后的讨论中，我将围绕着上面的两行来讨论，而不再涉及矩阵的内容了。

平移

如果调用时提供参数matrix(1,0,0,1,tx,ty)，即a=d=1，b=c=0，那么上面的式子就简化成

x’ = 1x+0y+tx = x+tx
y’ = 0x+1y+ty = y+ty

很容易看到，这里就是在原先x,y的基础上进行平移，变成x+tx,y+ty点而已。非常简单。如果数学上讲，tx和ty就好比是Δx和Δy。

x’ = x+Δx
y’ = y+Δy

CSS 3中的transform: translate(tx, ty);就等价于transform: matrix(1,0,0,1,tx,ty);注意，使用matrix的时候不需要单位，默认是px，而translate需要单位，可以是px、em之类的单位。

缩放和拉伸

如果调用时提供参数matrix(Sx,0,0,Sy,0,0)，即a或d不等于1，比如a=Sx，d=Sy而b=c=e=f=0，于是公式简化成

x’ = Sx*x+0y+0 = Sx*x
y’ = 0x+Sy*y+0 = Sy*y

可以想到，这个操作，实际上是让x的坐标扩大Sx倍，而y的坐标扩大Sy倍。
这主要是用来让元素进行缩放效果的。如果Sx和Sy大于1，则是放大，而Sx和Sy小于1，就是缩小了，如果等于1，那就是保持原状了。并且，由于x方向和y方向是相互独立的，所以可以一个方向放大，另一个方向缩小。
上面的那个例子中，我设置的m和n都是0.5，于是图形长宽就各缩小了一半。另外，值得注意的是，他是以元素的中心作为缩放的基点的，而不是左上角。
CSS 3中的transform: scale(Sx, Sy);就等价于transform: matrix(Sx,0,0,Sy,0,0);

旋转

这里用到的就相对高级一些了，需要使用三角函数的一些知识了
如果调用时提供参数matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

x’ = x*cosθ-y*sinθ+0 = x*cosθ-y*sinθ
y’ = x*sinθ+y*cosθ+0 = x*sinθ+y*cosθ

由于计算机图形学中，通常向右为x轴正方向，向下为y轴正方向，所以这里的θ表示元素绕坐标原点顺时针旋转的角度。而这里的原点不是元素的左上角，而是元素的中心点。
上面的例子中，我把一个div顺时针旋转了37°，cos37°=0.8，sin37°=0.6，所以提供的矩阵的参数就是 matrix(0.8,0.6,-0.6,0.8,0,0)
CSS 3中，transform:rotate(37deg)就等价于我上面的那个变换了。注意CSS 3中的角度必须带单位 deg。好处是不用自己算sin和cos值了。

切变

切变，就是把一个元素往某一个方向倾斜一定的角度。传入的参数应当是matrix(1,tan(θy),tan(θx),1,0,0)

x’ = x+y*tan(θx)+0 = x+y*tan(θx)
y’ = x*tan(θy)+y+0 = x*tan(θy)+y

这里的θx和θy分别代表往x正方向和往y正方向倾斜的角度，两者是相互独立的。上面的例子中，我把元素往x方向倾斜了45°，因此他的tan(θx)=1
CSS 3中的transform: skew(θx, θy);就等价于transform: matrix(tan(θx),0,0,tan(θy),0,0); 如果使用skew的话，直接使用角度即可，但必须带单位deg，比如上面的例子用矩阵的话写成transform: matrix(1,0,1,1,0,0);等价于 transform: skew(45deg, 0);

镜像反射

镜像反射就是指元素对某一条直线做镜像对称。最基本的情况是可以对经过原点的某条直线进行反射。定义(ux,uy)为直线方向的单位向量。也就是说，如果直线方程是y=kx，那么ux=1/sqrt(1+k^2)，uy=k/sqrt(1+k^2)
那么对这种镜像反射变化时传入的参数应当是
matrix(2*ux^2-1,2*ux*uy,2*ux*uy,2*uy^2-1,0,0)
于是最终的方程

x’ = (2*ux^2-1)*x+2*ux*uy*y
y’ = 2*ux*uy*x+(2*uy^2-1)*y

上面的例子中，就是对y=2x这条直线进行的镜像对称。CSS 3中目前没有简化的规则与之对应。

至于如何对一条不过原点的线对称，则需要设置原点所在的坐标了。由于默认情况下，原点坐标是这个元素的中心，如果改变了原点的坐标，就可以改变对称的直线，当然也可以改变前面所有效果的呈现方式，CSS 3中使用transform-origin方法修改坐标原点的位置。

最后，如果你想要玩的更High点，买本计算机图形学的书来看是不可避免的，这篇文章也仅仅是个皮毛而已。希望对你有所帮助。

扩展阅读

前端观察，你需要知道的CSS3 动画技术
维基百科中关于矩阵变换的条目
理解矩阵(1)
理解矩阵(2)
理解矩阵(3)
w3 文档，关于坐标系以及矩阵变换属性
w3 文档，SVG中的3D变换矩阵
w3 文档，CSS 3中的3D变换矩阵，基本跟上一条的差不多