CSS3卡片翻转动画，检测是否不支持

Question

我在我的项目中使用了一种3D翻转动画。就像这个网站所展示的那样（http://css3.bradshawenterprises.com/flip/）。

我想要检测浏览器是否支持这种类型的动画。例如，如果你在Windows XP /旧驱动程序上使用Chrome，它可能不会默认支持它，因为它可能会导致崩溃。当Chrome不支持它时，它将显示镜像名称，并且动画不会是3D的（对于我而言）。

我检查了两种不同的检测方法：
如何在没有webkit上下文的情况下检测CSS translate3d？ 和
检测'transform: translate3d'支持
变量has3d = function() { return ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()); }。

这两种方法都返回true。什么没有得到支持，我如何在不使用类库如Modernizr的情况下检测该属性？

- user1081577

---

我非常理解你的问题 http://stackoverflow.com/questions/11902720/detect-if-computer-can-support-3d-transforms-properly - Simon Arnold

Answer 1

您应该使用Modernizr来检测用户的浏览器是否支持您需要进行卡片翻转的所有内容。它专门为此而创建，比您自己寻找和维护解决方案要高效得多。随着浏览器的发展，modernizr也会不断更新，您就不必担心功能检测是否会出问题了。

- Asciiom

---

Modernizer会检测浏览器，而不是计算机的容量。例如，Modernizr将始终显示Chrome支持3D动画。尽管如此，在一台配备廉价显卡的旧计算机上，即使使用Chrome也无法渲染3D动画。 - Simon Arnold

Answer 2

你是否被迫使用CSS3？ Flip与所有主要浏览器兼容...

- napolux

---

是的，我尝试过那个。但是我正在翻转图像，而翻转并不真正是3D的。 - user1081577