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