检测 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;
              }

            }

Answer 1

你可以使用Modernizr:

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