有人知道我将如何检测transform:translate3d(x,y,z)支持可用吗?
我的问题是,我想使用translate3d跨浏览器,它是支持,因为它倾向于使用硬件加速,因此更平滑的动画,然后回退到翻译其中。
解决方法
退房
this solution。
它是基于这样的事实,如果浏览器支持变换,值的
window.getComputedStyle(el).getPropertyValue('transform')
将是包含变换矩阵的字符串,当将3d变换应用于元素e1时。否则,它将是未定义的或字符串’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"); }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。