MJiA

原文地址：3D transforms in Firefox 3.5 - the isocube
系列地址：颠覆网络35天

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

这个演示的作者是Zachary Johnson──居住在美国明尼阿波利斯的网页开发者，同时也是jQuery的动画“3D”旋转插件的作者。

我非常高兴能够在这里给大家做一个视觉效果的演示，这个视觉效果完全使用在Firefox 3.5中全新支持的-moz-transform CSS变形属性。我非常兴奋的看到这个特性被加到Firefox中，因为这样我就可以制作一些3D的等轴立方体效果，有时候也被称作2.5D。我制作了这个演示使得HTML的内容被映射到一个“3D”的等轴立方体的面上：

使用Firefox 3.5查看演示

-moz-transform属性可以使用一个CSS变形函数列表组成，这些函数可以包括旋转、缩放、倾斜和位移。或者，通过定义二维Affine变形矩阵来同时应用多个变形效果。由于所有的CSS变形函数都是在二维上工作，所以真正的3D带有立体投影的变形还不能被实现。在这个演示中，为了制作同轴效果，我使用了旋转和倾斜变形函数。

首先，定义立方体的容器div，以及容纳各个“面”的div，包括立方体的上、左、右三个面。

<div class=“cube”>
    <div class=“face top”>
    </div>
    <div class=“face left”>
    </div>
    <div class=“face right”>
    </div>
</div>

.cube {
    position: absolute;
}
.face {
    position: absolute;
    width: 200px;
    height: 200px;
}

现在我们需要把这几个面进行旋转和倾斜，主要是把每个面的div变形为顶角为60°或者120°的平行四边形。下面代码展示了如何使用-moz-transform来定义这些变形：

.top {
    -moz-transform: rotate(-45deg) skew(15deg, 15deg);
}
.left {
    -moz-transform: rotate(15deg) skew(15deg, 15deg);
}
.right {
    -moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}

接下来要做的就是使用绝对位置的布局把这些变形过的div面连接在一起。您可以使用矩阵方法来做，也可以试着改变移动的参数然后看起来接上就可以了。

为了添加3D效果，可以通过制定面不同的颜色来添加一些投影效果。同样，我还为立方体添加了阴影。您可以看到阴影效果基本上就是顶面的拷贝被移动到左下角，然后给这个阴影div设定黑色的背景和设定透明度opacity: 0.5;。

任何HTML代码，例如这个例子中的文字和表单按钮等，都可以被放到这些div中，从而显示在立方体的面上。这些HTML内容也都会被正确的投影的3D环境中。Christopher Blizzard跟我说不妨使用HTML 5的video元素把视频放到立方体的某个面上。您应该能看到，这真得很棒～

最后，复制一份立方体的所有布局代码，再加上2条CSS变形函数，我就可以制作第二个立方体。使用scale(0.5)让第二个立方体仅有50%的大小，使用translate(600px, 400px)把他放置在第一个立方体的旁边。

我希望你会觉得这个演示非常有趣，也希望能够激发您的灵感，通过Firefox 3.5 CSS 变形 创造更多的效果。

CSS变形同样在Safari 3.1+和Chrome中得到支持，不过使用-webkit-transform 属性。