作者 此演示由来自明尼苏达州明尼阿波利斯的 Web 开发人员 Zachary Johnson 创建，他还为 动画“3D”旋转 创建了一个 jQuery 插件。
我想展示一个使用 Firefox 3.5 浏览器中可用的新 -moz-transform CSS 变换属性可以实现的可视效果示例。看到 Firefox 添加了此功能，我非常兴奋，因为我知道它可以让我产生伪 3D 等轴测效果，有时也称为 2.5D。我创建了一个演示，其中 HTML 内容映射到“3D”等轴测立方体的面上
-moz-transform 属性可以采用 CSS 变换函数列表，包括旋转、缩放、倾斜和平移。或者，可以使用单个 2D 仿射变换矩阵同时执行多个变换。由于所有 CSS 变换函数都在二维空间中工作，因此尚无法实现具有透视投影的真正 3D 变换。在此演示中，我使用旋转和倾斜变换函数来创建 等轴测 效果。
首先，我为立方体定义一个容器 div，然后为立方体的顶部、左侧和右侧定义一个正方形 div。
.cube {
position: absolute;
}
.face {
position: absolute;
width: 200px;
height: 200px;
}
在不深入等轴测投影数学的情况下，我们必须旋转和倾斜立方体的面，以便将每个正方形 div 变成一个平行四边形，其中顶点的角度为 60° 或 120°。以下是使用新的 -moz-transform CSS 属性表示的这些变换
.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 一个黑色背景颜色并在 CSS 中设置 opacity: 0.5; 以使其过滤到页面背景上。
任何 HTML（例如此示例中的文本和表单按钮）都可以放在立方体任何面的 div 内。它将转换为正确的透视。 Christopher Blizzard 给了我一个想法，可以使用 Firefox 3.5 中现在支持的新 HTML5 视频标签将视频投射到立方体的一侧。如您所见，效果非常好。
最后，通过复制立方体标记并使用另外两个 CSS 变换函数，我能够创建第二个立方体。我使用 scale(0.5) 变换使立方体的大小变为 50%，并使用 translate(600px, 400px) 将其移动到位。
我希望您觉得此演示很有趣，并且它让您对 Firefox 3.5 CSS 变换 为 Web 带来的令人兴奋的可能性有了一些了解。
Safari 3.1+ 和 Chrome 也支持 CSS 变换，使用 -webkit-transform CSS 属性。
关于 Christopher Blizzard
一次发布，让网络变得更好。
51 条评论