|
【20100117】 其中 rotate 和 skew 可改变目标角度，两者参数俱为 deg，rotate 属性只一个 deg 参数，skew 有两个 deg 参数，分别控制 X 轴与 Y 轴。 那么，问题来了。首先，“倾斜”和“旋转”究竟有何不同？skew 的两个参数允许单独控制水平倾斜和垂直倾斜，假设两个参数值相同，岂非等价于整体旋转？然则 rotate 属性岂非多余？ 目前CSS3.0的相关技术文章不多，只好亲自实验。实验过程繁琐之极，兹不赘述，只说结果。当中颇多趣味。 rotate 的一个 deg 参数，控制目标整体旋转，而与目标的内部性状无关。换言之，就像前阵子上海倒而未塌的楼，那是因上帝将它的 rotate 参数设为了 90deg，而某些无知者 onclick 将其触发了，但楼体的内部格局却未发生任何形变。so，rotate 属性的作用就是将目标整体左旋或右旋，而不改变目标内部的任何性状。 skew 的两个 deg 参数互不影响，but，当其中之一改变时，目标的形状亦会随之改变，如同四边形左右倾斜时，上下两边仍保持水平，反之亦然，实际上是变成了平行四边形；至于四边形内部的文字，也会依此规则形变。当 skew 的两个 deg 参数相等时，譬如都设为30deg【注1】，则最终效果等同于 rotate 将目标右旋30度，并整体放大若干倍【注2】。 为何会放大呢，是 skew 所依据的数学公式本身所无法避免的副作用？抑或其实是解释和实现上的 bug？都无从知晓。skew 依据何种数学公式不必深究，只是想，无论何种情形，在内部引入一个参数用以修正这意外的缩放效应，大约是可行的；然而实现起来是否比较复杂呢？否则就难以解释 rotate 属性为何存在了。或者虽不复杂，然单独定义一个整体旋转的属性 rotate，较之在 skew 内部引入修正参数，假如前者解释更清晰，实现更容易，则 skew 之外再有一个 rotate 就理所当然了；尽管会造成使用者的某种轻度惶惑。
【注1】此处所谓一致是指绝对值，实际 X轴的 deg 值为负。因 skew 的 deg 参数作用于X轴与Y轴时，似乎并不一致，X轴的 deg 值为正则左倾（相当于左旋），为负则右倾（相当于右旋），而 Y轴与 X轴恰好相反，deg 值为正则右倾（相当于右旋），为负则左倾（相当于左旋）。至于 rotate，其 deg 值若为正则右旋（顺时针），为负则左旋（逆时针）。 【注2】笔者未曾实际计算倍数，仅凭观察推测，以一维线段而言，缩放比例似是原长与其在倾斜後所在斜面上的投影长之比，譬如水平线段AB长为1，投影在与其夹角为60°的平面上，则其投影A'B'的长变为2，此似即为 skew 的变形规则，换言之，一维图形在旋转某个角度之後，为保持其宽度或高度不变，其本身长度就增加了，此规则应用到二维图形，其整体面积势必增加，放大为原图形的相似形。 |
|
|
