css - 检测 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 支持 @支持规则。

这种方法是否适合检查对 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;
              }

            }

Answer 1

您可以使用Modernizr：

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