Mozilla Hacks

CSS 3D 变换开发者大赛入门指南（15 分钟视频教程）

头像照片 作者：Chris Heilmann

发布于 2012 年 3 月 6 日 分类于 CSS 和 视频教程

本月的 Mozilla 开发者大赛 主题是 CSS 3D 变换，为了提醒大家并激发灵感，我们认为提供一个简单的演示教程是个好主意：一个带有每个面内容的旋转立方体。很简单？是的！观看视频以查看结果。

您也可以 查看实际效果 以及 在 GitHub 上获取源代码。以下是一个 15 分钟的快速入门指南，介绍了这段代码的运作原理。

希望这能激发您的灵感，我们期待您在开发者大赛中的贡献。

阅读更多

关于 Chris Heilmann

HTML5 和开放网络布道师。让我们一起解决问题！

更多 Chris Heilmann 的文章…

7 条评论

  1. Neel Mehta

    太棒了！CSS 越来越好了……我年纪够大，还记得使用标签的旧时光。我们取得了多大的进步……

    2012 年 3 月 6 日 14:35

  2. Kesty

    这正是我渴望在 Web 开发中看到的

    2012 年 3 月 6 日 23:50

  3. S

    谢谢 Chris，精彩的介绍。现在我们只需要“那个”创意了 :)

    2012 年 3 月 7 日 02:27

  4. Alex

    我们已更新了我们的 3D 图片滑块，使其能够与 Firefox 10+ CSS3D 兼容
    查看一下 http://getcu3er.com/javascript

    此外，Fennec（移动版 Firefox）确实在样式中包含了 CSS3D 变换属性，但它尚未实现 3D 变换
    您知道 CSS3D 什么时候会在移动设备上可用吗？

    2012 年 3 月 7 日 07:33

  5. pd

    不幸的是，您自己网站上的侧边栏 3D 变换是众多寻求解决方案的技术之一，而这些技术实际上让 Web 变得更糟。至少在我的电脑上，在旋转模式下，它所做的只是使文本无法阅读。

    希望这次开发者大赛能够找到这项技术的用途（类似 Cover Flow 的图片库？），而这种用途似乎还缺失。

    2012 年 3 月 7 日 08:02

  6. Beben Koben

    我有这些信息
    http://undercover-blogger.blogspot.com/2012/02/demo-cube-animations.html

    2012 年 3 月 7 日 14:58

  7. Huan

    我提交了这个：https://mdn.org.cn/en-US/demos/detail/css-3d-carousel-gallery
    简约风格，因为我无法在 Chrome（3D 变换仅限硬件加速，我没有必要的硬件）或 Opera（尚未发布实现）中进行测试，因此在水平面上倾斜旋转木马以展示 3D 似乎没有太大意义，尽管我期待看到其他人使用这种图片库方法进行更华丽的展示 :)

    2012 年 3 月 10 日 08:05

本文评论已关闭。