检测'transform：translate3d'的支持
有谁知道我将如何检测transform: translate3d(x,y,z)支持是可用的？
我的问题是我想在支持它的浏览器上使用translate3d ，因为它倾向于使用硬件加速，因此对于animation更平滑，然后回落到不支持的位置。
看看这个解决scheme 。
它基于一个事实，即如果一个浏览器支持转换，
window.getComputedStyle(el).getPropertyValue('transform')
将一个包含变换matrix的string，当一个3D变换应用到元素el 。 否则，它将是undefined或者是string'none' ，如Opera 12.02的情况。
它适用于所有主stream浏览器。
代码：
function has3d() { if (!window.getComputedStyle) { return false; } var el = document.createElement('p'), has3d, transforms = { 'webkitTransform':'-webkit-transform', 'OTransform':'-o-transform', 'msTransform':'-ms-transform', 'MozTransform':'-moz-transform', 'transform':'transform' }; // Add it to the body to get the computed style. document.body.insertBefore(el, null); for (var t in transforms) { if (el.style[t] !== undefined) { el.style[t] = "translate3d(1px,1px,1px)"; has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]); } } document.body.removeChild(el); return (has3d !== undefined && has3d.length > 0 && has3d !== "none"); }
宣布3D转换的原始博客文章有一个图像翻转演示 ，它是通过媒体查询来完成的，如下所示：
@media all and (-webkit-transform-3d) { /* Use the media query to determine if 3D transforms are supported */ #flip-container { -webkit-perspective: 1000; } #flip-card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: -webkit-transform 1s; } #flip-container:hover #flip-card { -webkit-transform: rotateY(180deg); } }
这篇博文有很好的媒体查询介绍。 这有一些更多的细节。
您可以尝试CCS3 @supports ：
@supports (transform: translate3d) { div { transform : translate3d(20px,0,0); } } @supports not (transform: translate3d) { div { transform: translate(20px,0); } }
我可以使用@support
我build议使用Modernizr 。
它可以检测整个浏览器function，包括3D变换。 它还提供了一个为具有或不具有各种function的浏览器指定CSS规则的方法，因此它听起来像它将完全符合你的要求。
希望有所帮助。
//The following is based on iScroll4's tests to determine if a browser supports CSS3 3D transforms. var has3d = function() { return ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()); }
正在修补一个方法来检查3D支持..在这篇文章中使用这个实现从Jeffery Way。 允许更less的代码和更多的用例;）
/** * Test For CSS3 property support * use 'perspective' to test for 3d support */ var supports = (function() { 'use strict'; var div = document.createElement('div'), vendors = 'Khtml ms O Moz Webkit'.split(' '), len = vendors.length; return function(prop) { if (prop in div.style) return true; prop = prop.replace(/^[az]/, function(val) { return val.toUpperCase(); }); while(len--) { if (vendors[len] + prop in div.style) { return true; } } return false; }; })(); if(supports('perspective')) { // do 3d stuff }
这个代码被调整用于testing3D转换支持和其他CSS3function。
这个代码的优点是它检测到支持的供应商前缀（如果有的话）。 叫它：
testCSSSupport('transform')
可能的返回值：
false ，当function不受支持，或
{ vendor: 'moz', cssStyle: '-moz-transform', jsStyle: 'MozTransform' }
当function支持
/** * Test for CSS3 feature support. Single-word properties only by now. * This function is not generic, but it works well for transition and transform at least */ testCSSSupport: function (feature, cssTestValue/* optional */) { var testDiv, featureCapital = feature.charAt(0).toUpperCase() + feature.substr(1), vendors = ['', 'webkit', 'moz', 'ms'], jsPrefixes = ['', 'Webkit', 'Moz', 'ms'], defaultTestValues = { transform: 'translateZ(0.5em) rotateY(10deg) scale(2)' // This will test for 3D transform support // Use translateX to test 2D transform }, testFunctions = { transform: function (jsProperty, computed) { return computed[jsProperty].substr(0, 9) === 'matrix3d('; } }; function isStyleSupported(feature, jsPrefixedProperty) { if (jsPrefixedProperty in testDiv.style) { var testVal = cssTestValue || defaultTestValues[feature], testFn = testFunctions[feature]; if (!testVal) { return false; } //Assume browser without getComputedStyle is either IE8 or something even more poor if (!window.getComputedStyle) { return false; } testDiv.style[jsPrefixedProperty] = testVal; var computed = window.getComputedStyle(testDiv); if (testFn) { return testFn(jsPrefixedProperty, computed); } else { return computed[jsPrefixedProperty] === testVal; } } } //Create a div for tests and remove it afterwards if (!testDiv) { testDiv = document.createElement('div'); document.body.appendChild(testDiv); setTimeout(function () { document.body.removeChild(testDiv); testDiv = null; }, 0); } var cssPrefixedProperty, jsPrefixedProperty; for (var i = 0; i < vendors.length; i++) { if (i === 0) { cssPrefixedProperty = feature; //todo: this code now works for single-word features only! jsPrefixedProperty = feature; //therefore box-sizing -> boxSizing won't work here } else { cssPrefixedProperty = '-' + vendors[i] + '-' + feature; jsPrefixedProperty = jsPrefixes[i] + featureCapital; } if (isStyleSupported(feature, jsPrefixedProperty)) { return { vendor: vendors[i], cssStyle: cssPrefixedProperty, jsStyle: jsPrefixedProperty }; } } return false; }
Bootstrap使用以下代码：
@media all and (transform-3d), (-webkit-transform-3d) { .carousel-inner > .carousel-item { transition: transform 0.6s ease-in-out; backface-visibility: hidden; perspective: 1000px; } .carousel-inner > .carousel-item.next, .carousel-inner > .carousel-item.active.right { left: 0; transform: translate3d(100%, 0, 0); } .carousel-inner > .carousel-item.prev, .carousel-inner > .carousel-item.active.left { left: 0; transform: translate3d(-100%, 0, 0); } .carousel-inner > .carousel-item.next.left, .carousel-inner > .carousel-item.prev.right, .carousel-inner > .carousel-item.active { left: 0; transform: translate3d(0, 0, 0); } }
tl：dr – 使用用户代理嗅探。 这里是一个用于在浏览器中检测CSS 3D转换支持的脚本： https ： //github.com/zamiang/detect-css3-3D-transform
我尝试了这篇文章中的大部分方法，其中包括Modernizer和Meny的方法，但不支持Firefox等浏览器，同时为Safari 4＆5，iOS设备和Chrome上的旧版浏览器保持良好的体验（他们都有他们的怪癖）。
CSS3 3D转换涉及浏览器和graphics卡之间的交互。 浏览器可能会parsing3D声明，但可能无法正确指示graphics卡如何呈现您的页面。 有很多可能的结果，从页面渲染（Safari 4）到页面渲染精美，然后几秒钟后浏览器崩溃（iOS 4上的Safari）。 任何“特征检测”方法都会无法接受地将这些标记为“支持CSS3 3D变换”。 这是“特征检测”失败并且用户代理嗅探（以及大量testing）胜手的一种情况。
大多数特征检测都假定“支持”或“不支持”二进制。 CSS3 3D变换不是这样 – 有一个“梯度的支持”。
CSS3 3D变换支持可以分为4个级别：
- 可靠地支持大多数机器上的3D变换。 例如：Safari 6
- 可以parsing和应用3D变换声明，但会忽略3D部分。 例如：在Retina MacBook Pro上使用Chrome浏览器。
- 可以parsing和应用3D变换声明，但呈现不可接受的方式。 例如：Windows上的Safari 4和Safari 4/5在页面上显示行。
- 无法以任何方式应用3D变换声明。 例如：IE或Firefox <v10
这个脚本将在场景1和2中返回true ，而在3和4中则返回false ：
注意：新来参加stackoverflow – 请让我知道，如果我应该粘贴在线代码（这是一个很长的时间）
使用jQuery：
var cssTranslate3dSupported = false; (function() { var div = $('<div style="position:absolute;">Translate3d Test</div>'); $('body').append(div); div.css( { 'transform' : "translate3d(20px,0,0)", '-moz-transform' : "translate3d(20px,0,0)", '-webkit-transform' : "translate3d(20px,0,0)", '-o-transform' : "translate3d(20px,0,0)", '-ms-transform' : "translate3d(20px,0,0)" }); cssTranslate3dSupported = (div.offset().left == 20); div.empty().remove(); })();
硬件加速手风琴的作者如下所示：
var has3d = ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix())
只是简单地使用：
alert($.support.cssTransform3d);
如果支持则提醒true，否则提示false
