如何解决正在检测“ transform:translate3d”支持
| 有人知道我将如何检测“ 0”支持吗? 我的问题是,我想在支持该功能的浏览器中使用ѭ1,因为它倾向于使用硬件加速,从而使动画更流畅,然后又退回到translate
,而不支持。
解决方法
查看此解决方案。
这是基于以下事实:如果浏览器支持转换,则
window.getComputedStyle(el).getPropertyValue(\'transform\')
当将3d变换应用于元素d4ѭ时,它将是包含变换矩阵的字符串。否则,它将是undefined
或字符串\'none\'
,如Opera 12.02一样。
它适用于所有主要浏览器。
代码:
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);
}
}
@supports not (transform: translate3d) {
div {
transform: translate(20px,0);
}
}
我可以使用@support
,我建议使用Modernizr。
它可以对整个浏览器功能进行特征检测,包括3D变换。它还提供了一种为具有或不具有多种功能的浏览器指定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的此实现。允许更少的代码和更多的用例;)
/**
* 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(/^[a-z]/,function(val) {
return val.toUpperCase();
});
while(len--) {
if (vendors[len] + prop in div.style) {
return true;
}
}
return false;
};
})();
if(supports(\'perspective\')) {
// do 3d stuff
}
,对该代码进行了调整,以测试3D变换支持和其他CSS3功能。
此代码的优点是它检测到支持的供应商前缀(如果有)。叫它:
testCSSSupport(\'transform\')
可能的返回值:
false
,不支持该功能时,或
{
vendor: \'moz\',cssStyle: \'-moz-transform\',jsStyle: \'MozTransform\'
}
支持功能时
/**
* 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\',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);
}
.carousel-inner > .carousel-item.prev,.carousel-inner > .carousel-item.active.left {
left: 0;
transform: translate3d(-100%,0);
}
.carousel-inner > .carousel-item.next.left,.carousel-inner > .carousel-item.prev.right,.carousel-inner > .carousel-item.active {
left: 0;
transform: translate3d(0,0);
}
}
,tl:dr-使用用户代理嗅探。这是用于检测跨浏览器的CSS 3D转换支持的脚本:https://github.com/zamiang/detect-css3-3D-transform
我尝试了本文中的大多数方法,其中包括Modernizer和Meny \的方法,但无法支持Firefox之类的浏览器,同时仍对Safari 4&5,iOS设备和Retina MacBook pro上的Chrome等旧版本的浏览器保持良好的体验(所有这些有他们的怪癖)。
CSS3 3D转换涉及浏览器和图形卡之间的交互。浏览器可能能够解析3D声明,但可能无法正确指示图形卡如何呈现页面。有很多可能的结果,从页面上带有线条的呈现(Safari 4)到页面呈现精美,然后在几秒钟后崩溃浏览器(iOS4上的Safari)。任何“特征检测”方法都无法将其标记为“支持CSS3 3D变换”。在这种情况下,“功能检测”会失败,而用户代理嗅探(以及大量测试)会失败。
大多数功能检测均假定\'supports \'或\'not support \'二进制文件。 CSS3 3D变换不是这种情况-有一个“支持梯度”。
CSS3 3D转换支持可以分为4个级别:
在大多数机器上可靠地支持3D变换。例如:Safari 6
可以解析和应用3D变换声明,但忽略3D零件。例如:Retina MacBook Pro上的Chrome。
可以解析和应用3D变换声明,但以无法接受的方式进行渲染。例如:Windows上的Safari 4和Safari 4/5在页面上显示行。
不能以任何方式应用3D变换声明。例如:IE或Firefox 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)\",\'-moz-transform\' : \"translate3d(20px,\'-webkit-transform\' : \"translate3d(20px,\'-o-transform\' : \"translate3d(20px,\'-ms-transform\' : \"translate3d(20px,0)\"
});
cssTranslate3dSupported = (div.offset().left == 20);
div.empty().remove();
})();
,硬件加速手风琴的作者检查如下:
var has3d = (\'WebKitCSSMatrix\' in window && \'m11\' in new WebKitCSSMatrix())
,只需简单地使用:
alert($.support.cssTransform3d);
如果受支持,则警告为true,否则为false
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。