检测CSS 3D变换

Question

我试图检测浏览器是否支持3D CSS变换。我查阅了网络上提供的每一种解决方法，但都无法奏效。然后我尝试使用@support CSS属性来实现我的需求。在Linux中，它在Chrome和Firefox中完美地运行，但在Windows中则不行。可能是因为我在两个操作系统中都使用Chrome 23进行测试，而根据https://developer.mozilla.org/en-US/docs/CSS/@supports#Browser_compatibility的兼容性表格，只有Chrome 24才支持@support规则。对于检查3D支持是否适用此方法，有何想法？我只关心Chrome 23.x及以上和Firefox 18及以上，而不关心其他浏览器。

        @supports(-webkit-transform: perspective( 1px ) )or
                 (-moz-transform: perspective( 1px) ) or
                 (-o-transform: perspective( 1px) ) or
                 (transform: perspective( 1px) ){

              #supports {
                  display:block;
              }

            }

- adi rohan

---

你试过使用 http://modernizr.com/ 吗？ - Johan

Answer 1

你可以使用 Modernizr：

if (Modernizr.csstransforms3d) {
  // CSS 3D Transforms supported
} else {
  // not supported
}

- Simone

---

那刚好解决了问题，非常感谢。我甚至无法给你点赞 :( - adi rohan

这个回答在当前版本的Modernizr中已经不再有效。 - Michael

正如@Michael所写，这种方法已经不再适用了。现代浏览器使用Modernizr将一个包含特性的类添加到HTML元素中。在JavaScript中，我只需要检查这个类是否存在即可。 - obs