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