Skip to main content

A simple detection script to check browser support for the CSS property transform3d.

- (update: )

3D transform detection script

A boolean variable to indicate browser support for 3D CSS transforms.

May be eaisly modified to test for other CSS properties.

Language JavaScript
var hasTransform3d = (function () {
  var d = document,
      el = d.createElement('p'),
      property = "transform",
      has3d = "none";
  if (window.getComputedStyle) {
    d.body.insertBefore(el, null);
    if (el.style[property] !== undefined){
      el.style[property] = 'translate3d(1px, 1px, 1px)';
      has3d = window.getComputedStyle(el).getPropertyValue(property);
    }
    d.body.removeChild(el);
  }
  return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
}());

May be used to mark the HTML tag with a class.

Language JavaScript
var str = "noTransform3d";
if (hasTransform3d) {
  str = "hasTransform3d";
}
document.documentElement.classList.add(str);

Google Closure Compiled

235 bytes gzipped (335 bytes uncompressed).

Language JavaScript
// hasTransform3d v1.0 21/02/2016
// 235 bytes gzipped (335 bytes uncompressed)
var hasTransform3d=(function(){var c=document,a=c.createElement("p"),b="none";window.getComputedStyle&&(c.body.insertBefore(a,null),void 0!==a.style.transform&&(a.style.transform="translate3d(1px, 1px, 1px)",b=window.getComputedStyle(a).getPropertyValue("transform")),c.body.removeChild(a));return void 0!==b&&0<b.length&&"none"!==b}());

Socialise: