屏幕截图：3D CSS 悬停效果和 3D CSS 测试工具

最新版 Aurora 中支持的 CSS 3D 变换允许我们实现一些过去只能在 Flash 中或使用倾斜和滤镜技巧才能实现的漂亮效果。前几天有人要求我演示一个小例子，我觉得给经典的图片悬停效果添加一些趣味会很有意思。

您可以使用 Chrome、Safari 或 Firefox Aurora/Nightly 查看此效果。旧版浏览器应该只会显示普通的悬停效果（是的，第一个例子看起来很奇怪，因为使用了 logo 透明度，但在支持的浏览器中，效果会更酷）。

由于有人询问了如何实现，我认为最简单的办法是创建一个测试工具，让大家可以自己尝试 3D CSS。这里有一个屏幕截图，我解释了如何使用它以及如何实现悬停效果。

在创建过程中，我发现了一些有趣的 bug，现在将提交报告。这就是尝试新技术的益处。希望您喜欢！

更多相关阅读

HTML5 和开放网络的布道者。让我们一起解决这个问题！

Andi Smith

太棒了，谢谢。我其实也在考虑自己构建一个测试工具，但你抢先一步了！

我发现 CSS 动画（3D 或其他）的一个问题是，如果代码中存在错误，它们非常难以调试。据我所知，没有办法添加断点等。

像这样的测试工具可以降低出错的风险，但您知道如何正确调试吗？Firefox 未来是否可能会将其作为开发人员工具套件的补充功能？我对此很感兴趣，但不太确定从哪里开始。

2011 年 12 月 8 日 00:46
pd

看起来不错，但我就是想不出在普通网页上的使用场景。也许我服务的公司或目的不够多，没有足够的用户群体欣赏为了视觉效果而存在的视觉效果。

2011 年 12 月 8 日 08:13
1. Jason
  
  我能想到的标准用例是“翻页卡”和旋转轮播图片库。我实际上都尝试过作为实验。
  
  2011 年 12 月 8 日 10:44
Beben Koben

更多学习内容……谢谢 ♥

2011 年 12 月 13 日 05:13
Yoganandh

太棒了……感谢为所有人提供代码构建工具。

2012 年 3 月 6 日 22:29
Aubrey Morrell

不不不！不要让你的客户看到这个。把互联网带回 1987 年——3D 旋转火焰 logo！！！

2012 年 3 月 27 日 01:47
Courtney Cox

我认为这非常适合许多网站的左上角 logo。感谢提供这个测试工具！我肯定很快就会用上它。

2012 年 3 月 27 日 07:05

本文评论已关闭。

Hacks