作者Firefox 3.5 在其 CSS 实现中增加了一项功能，即 变换函数。这些函数允许您通过旋转、倾斜、缩放和平移元素来操纵二维空间中的元素，从而改变其外观。
我已经 制作了一个演示，展示了这些函数是如何工作的。
这个演示中有四个动画对象。让我们逐个看一下它们。
旋转 Firefox 徽标
在左侧，我们看到一个漂亮的盒子里的 Firefox 徽标，愉快地原地旋转。这是通过定期设置图像对象的旋转值来实现的，图像对象的 ID 是logoimg，就像这样
var logo = document.getElementById("logoimg");
logoAngle = logoAngle + 2;
if (logoAngle >= 360) {
logoAngle = logoAngle - 360;
}
var style = "-moz-transform: rotate(" + logoAngle + "deg)";
logo.setAttribute("style", style);
每次运行动画函数时，我们都会通过构造以下形式的样式字符串，使其绕其原点旋转 2°：-moz-transform: rotate(
默认情况下，所有元素的原点都在其中心（即每个轴的 50%）。可以使用-moz-transform-origin属性更改原点。
倾斜文本
在这个演示中，我们有两个倾斜的例子；第一个是水平倾斜，这会导致文本沿着 X 轴“倾斜”来回移动。第二个是垂直倾斜，这会导致基线沿着 Y 轴枢轴旋转。
在这两种情况下，实现此动画的代码基本相同，因此我们只看一下水平倾斜的代码
text1SkewAngle = text1SkewAngle + text1SkewOffset;
if (text1SkewAngle > 45) {
text1SkewAngle = 45;
text1SkewOffset = -2;
} else if (text1SkewAngle < -45) {
text1SkewAngle = -45;
text1SkewOffset = 2;
}
text1.style.MozTransform = "skewx(" + text1SkewAngle + "deg)";
此代码更新文本倾斜的当前量，从零度开始，在 -45° 和 45° 之间来回移动，每次调用动画函数时移动 2°。正值将元素倾斜到右侧，负值将元素倾斜到左侧。
然后更新元素的变换样式，将变换函数设置为以下形式skewx(
缩放元素
演示中包含的最后一个示例展示了如何使用scale变换函数缩放元素
text3Scale = text3Scale + text3ScaleOffset;
if (text3Scale > 6) {
text3Scale = 6;
text3ScaleOffset = -0.1;
text3.innerHTML = "It's going away so fast!"
text3.style.color = "blue";
} else if (text3Scale < 1) {
text3Scale = 1;
text3ScaleOffset = 0.1;
text3.innerHTML = "It's coming right at us!";
text3.style.color = "red";
}
text3.style.MozTransform = "scale(" + text3Scale + ")";
此代码将元素放大和缩小到其原始大小（缩放因子为 1）和缩放因子为 6 之间，每帧移动 0.1 个单位。这是通过构建以下形式的变换来实现的scale(
此外，只是为了好玩，我们还通过设置块的innerHTML属性为新内容，在切换缩放方向时更改文本和文本的颜色。
最后说明
从这里带走另外三个要点
首先，请注意，随着缩放文本变宽，文档的宽度会发生变化以适应它，随着文本变宽而变宽，因此其右侧边缘会超过文档的边缘，然后随着文本缩小而变窄。您可以通过观察 Firefox 浏览器窗口底部的滚动条来看到这一点。
其次，请注意，您实际上不仅可以在元素变换时选择和复制文本，而且在文本继续变换时选择仍然保持不变（尽管当我们更改缩放示例的内容时，选择会消失）。
第三，我没有在这里涵盖所有可能的变换。例如，我跳过了translate变换函数，它允许您水平或垂直平移对象（基本上，通过偏移量移动其位置）。您可以从 支持的变换的完整列表 中获取 Mozilla 开发者中心 网站。
显然，这个演示有点儿琐碎（就像演示通常那样）。但是，在设计界面时，您可以用它们做一些真正有用的事情；例如，您可以沿表格的 Y 轴绘制旋转 90° 的文本，以便将行标签放在狭窄但高的空间中。
9 条评论